This document discusses tools for compiling, linting, and debugging Sass files including: - Using the Sass CLI and options like --watch and --style to compile Sass - Creating configuration files like .ruby-version, Gemfile, and .gitignore - Linting Sass with scss-lint and configuring it with .scss-lint.yml - Generating sourcemaps with Sass's --sourcemap flag and mapping them to source files in the browser devtools.

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.

16. Using the Sass CLI to compile your 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