Everyday Sass Tools

I use the Sass CLI, specifically the Dart Sass Command-Line Interface flavor, to compile my SCSS to CSS – but I also use it to watch files for changes (it’ll even creep on imported files), and compile to minified CSS. There’s a bunch of useful flags & methods that I’ve found very useful that I’d like to share with you.

Watching Files

When a change is made to an SCSS file, it needs to be compiled to CSS. There are a few ways to do this. You could compile manually after every change, watch the file & it’s dependencies/imports for changes to fire a compilation, or have the CLI periodically check for updates to the file & it’s dependencies/imports.

To compile a file manually, the sass command is used, passing the input file & output file as args.

sass index.scss:index.css 
//or 
sass index.scss index.css

Watching

In my use, SCSS is compiled in to a single index.css file from index.scss, which is where the variable declarations and imports happen. The index.scss file typically imports the front-end framework that’s being used, fonts, resets, and any other CSS/SCSS needed. Aside from the initial set up, I never work directly in index.scss, but I do work in the files that it imports. When I make a change in an imported file, the CLI’s --watch flag can see that and still compile index.scss to index.css. The flag goes after the call to sass, but before the source file’s name.

sass --watch index.scss:index.css

Minifying

I used to use a minifying tool, but recently discovered that the CLI can handle that, too. By using the --style flag, the output style can be set to expanded (default) or compressed (think minified). As usual, the flag goes before the source file. An argument has to be passed, either compressed or expanded, using the = character. I find it useful to name the output file index.min.css. This flag is shortened to --s.

sass --style=compressed index.scss:index.min.css 
//or 
sass -s=compressed index.scss:index.min.css 

Quiet Mode

There are definitely times that I need to know about errors – but I’m often using libraries (lookin’ at you, Bootstrap) that uses Sass functions that are being deprecated (like the / operator to divide…@bootstrap). Warnings can be depressed by passing the --quiet flag, which will supress all warnings, including ones that don’t come from dependencies. Coming in extreme clutch is also the --quiet-deps flag which is imported – which makes things real nice – still get the warnings that you author, but not those pesky Bootstrap warnings.

sass --quiet index.scss:index.css 
//quiet dependencies 
sass --quiet-deps index.scss:index.css 

---

Combining Flags

Handily, flags can be combined. Wanna watch a file and minify it on compilation? Yes, you can! Supress warnings? Yes, you can! Have the CLI make you a cup of coffee? Well, we’re not there yet, but they tell me they’re close!

sass --watch --style=compressed --quiet index.scss:index.min.css 
//abbreviated flags 
sass -w -s=compressed --quiet index.scss:index.min.css 

That last sample is the command I run when I need to compile a new stylesheet for this site. Previously, I didn’t have a style defined for CLI codeblocks, so i just ran that as I built them in the browser. Pretty neat!

Do you have any cool Sass CLI tricks to share? Put it in a comment! Or email me? Twitter me? Wait, is that what you say? Thanks for coming to my ted talk!