Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sass tooling!


Published on

Sass Tooling!

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Sass tooling!

  1. 1. Sass Tooling! Or How to StaySane When WorkingWith Sass
  2. 2. We are goingto cover: compiling linting debugging
  3. 3. We are notgoingto cover: syntax commentblocks how you should use mixins the Lostfinale whether or notthis is alladream
  4. 4. RTFM? Yeah. Read them. For sure.
  5. 5. Compilation
  6. 6. There are non-Rubycompilers for Sass ( and ). LibSass node- sass
  7. 7. Theyare notcovered in this guide because theyare notat feature paritywith the Rubyimplementation, buttheycan compile literallyorders of magnitude faster.
  8. 8. 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
  9. 9. Create aGemfileto specifywhich version of Sass to use: source'' 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.
  10. 10. Using the Sass CLI to compile your sass!
  11. 11. Simplestoption for Sass compilation: $sass{pathtoyourSass}:{pathtowhereyouwantCSS}
  12. 12. These paths to Sass and CSS can be individualfiles or entire directories!
  13. 13. You can also setSass to watch for changes: $sass--watch{pathtoyourSass}:{pathtowhereyouwantCSS}
  14. 14. And you can specifywhich style to compile to: $sass--watch--stylecompressed{pathtoyourSass}:{pathtowhereyouwantCSS}
  15. 15. 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.
  16. 16. Create a.gitignorefile to tellGitto ignore the sass- cache: .sass-cache .sass-cache/is an idiot. You don'tneed to version track it.
  17. 17. Linting
  18. 18. Use to lintyour Sass:scss-lint $geminstallscss-lint $scss-lint{pathtoyourSassdir}
  19. 19. Use (Sublime Text) or (Atom) to lint your Sass as you write it SublimeLinter Linter
  20. 20. Use to setup awebhook to rejectunlinted Sass overcommit
  21. 21. Use .scss-lint.ymlto configure scss-lint: linters: PropertySortOrder: enabled:false
  22. 22. Sourcemaps
  23. 23. In Chrome, open about:flagsand check Enable Developer Tools experiments
  24. 24. In the devtools settings menu, click the Experiments tab and check Enable frameworks debuggingsupport
  25. 25. In the devtools settings menu, click the Generaltagand check Auto-reload generated CSS
  26. 26. 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.
  27. 27. Now run sass with the --sourcemapflagto generate sourcemaps: $sass--watch--stylecompressed--sourcemap{pathtoyourSassfilewithyourimports}:{
  28. 28. Open the Sources tab in the devtools, rightclick the whiteness, click Add Folder to Workspace and selectyour project's directory
  29. 29. Rightclick your .cssand selectMap to File System Resource... then selectyour .scssor .sassand follow the promptto reload the devtools