Sass tooling!
- 1. Sass Tooling! Or How to StaySane When WorkingWith Sass
- 3. We are goingto cover: compiling linting debugging
- 5. We are notgoingto cover: syntax commentblocks how you should use mixins the Lostfinale whether or notthis is alladream
- 7. RTFM? Yeah. Read them. For sure.
- 9. Compilation
- 11. There are non-Rubycompilers for Sass ( and ). LibSass node- sass
- 12. Theyare notcovered in this guide because theyare notat feature paritywith the Rubyimplementation, buttheycan compile literallyorders of magnitude faster.
- 14. Startbycreatinga.ruby-versionfile thatcontains the version of Rubythatyou are usingfor Sass compilation: 2.1.2 This tells and to change to thatversion of Ruby when you cd into the directorycontainingthe .ruby- versionfile. RVM rbenv
- 15. Create aGemfileto specifywhich version of Sass to use: source'https://rubygems.org' gem'sass','3.3.13' Use the version number displayed when you run: $geminstallsass Now, once you run bundle installin this directory, all contributors willbe usingthe same version of Rubyand Sass.
- 17. Simplestoption for Sass compilation: $sass{pathtoyourSass}:{pathtowhereyouwantCSS}
- 18. These paths to Sass and CSS can be individualfiles or entire directories!
- 19. You can also setSass to watch for changes: $sass--watch{pathtoyourSass}:{pathtowhereyouwantCSS}
- 20. And you can specifywhich style to compile to: $sass--watch--stylecompressed{pathtoyourSass}:{pathtowhereyouwantCSS}
- 22. Create asassfile to compile your Sass. Putthe command thatyou've been usingto compile Sass in this file and, to give yourself proper permissions, run: $touchsass $chmodu+rwx./sass $echo"sass--watch--stylecompressed{pathtoyourSass}:{pathtowhereyouwantCSS}" Now you can compile your Sass byrunning: $./sass Boom.
- 23. Create a.gitignorefile to tellGitto ignore the sass- cache: .sass-cache .sass-cache/is an idiot. You don'tneed to version track it.
- 25. Linting
- 27. Use to lintyour Sass:scss-lint $geminstallscss-lint $scss-lint{pathtoyourSassdir}
- 29. Use (Sublime Text) or (Atom) to lint your Sass as you write it SublimeLinter Linter
- 30. Use to setup awebhook to rejectunlinted Sass overcommit
- 31. Use .scss-lint.ymlto configure scss-lint: linters: PropertySortOrder: enabled:false
- 32. Sourcemaps
- 34. In Chrome, open about:flagsand check Enable Developer Tools experiments
- 36. In the devtools settings menu, click the Experiments tab and check Enable frameworks debuggingsupport
- 37. In the devtools settings menu, click the Generaltagand check Auto-reload generated CSS
- 39. Note thatthis mightnotdo anything. If your sourcemap contains arelative url, Chrome can'thandle it. The Sass team is wontfixingthis, butthe Chrome team is working on it. Sometimes itworks though. I don'tknow.
- 40. Now run sass with the --sourcemapflagto generate sourcemaps: $sass--watch--stylecompressed--sourcemap{pathtoyourSassfilewithyourimports}:{
- 41. Open the Sources tab in the devtools, rightclick the whiteness, click Add Folder to Workspace and selectyour project's directory
- 43. Rightclick your .cssand selectMap to File System Resource... then selectyour .scssor .sassand follow the promptto reload the devtools