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.
12. Theyare notcovered in this guide because theyare notat
feature paritywith the Rubyimplementation, buttheycan
compile literallyorders of magnitude faster.
13.
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.
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}
21.
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.
34. In Chrome, open about:flagsand check Enable
Developer Tools experiments
35.
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
38.
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
42.
43. Rightclick your .cssand selectMap to File System
Resource... then selectyour .scssor .sassand follow
the promptto reload the devtools