Command line options in Sass

So before we get to our heading styles, let's look at some of the command line options that can be passed along with our Sass command. We saw the --watch option. This tells Sass to watch the sass file or an entire folder changes, and then automatically compiles CSS whenever we save any changes to our Sass files.

Watching files and directories

We also told Sass to watch an entire directory and compile to a separate directory. Therefore, any file we created or updated in our sass directory, whether it was a .scss or .sass file, would be compiled to a CSS file of the same name in the css folder.

Tip

You can even use files with the indented Sass syntax and files written in the SCSS syntax in one project. So if you haven't started using the indented Sasssyntax simply because you don't fancy writing all of your mixins again, or you don't want to have to convert all your files, well you don't have to. Simply include any .scss files partials in a .sass (or vice versa) and everything will work just fine!

I highly recommend trying the indented Sass syntax. Once you've embraced it you won't go back.

Note

In practice I use the indented Sass syntax for work and personal projects; however, for demonstration purposes I'll be using the more commonly seen SCSS syntax for the remainder of this book.

Compile files and folders

There are times when you only need to make a very minute change to a Sass project, therefore you may wish to compile those updates, but not watch your files or folders for further changes. You can achieve this with the --update option:

sass -update sass/style.scss:css/style.css

The preceding code will compile any changes we've made to style.scss in the sass folder, into the style.css file in our CSS folder. However, if there are no changes detected, Sass is smart enough not to compile.

Force Sass to compile

If you want Sass to compile, even if it doesn't detect changes you can add the --force option, like so:

sass --force --update sass/style.scss:css/style.css

As you can see, the order doesn't really matter. You can place all of the options at the right, after the command, or all at the very end. What I tend to do is figure out what reads the most like what I want to achieve and that helps me remember it. Sass force update style.scss to style.css.

CSS output style

The next thing you might want to do is control how the CSS is compiled. By default, the CSS generated is in the nested format, which keeps the indentation of the original Sass file and places the closing bracket on the same last line of the rule. For example:

.navbar{ 
    font-size: 1rem; 
    list-style:none; 
    padding: 0; 
    margin: 0; } 
    .navbar > .menu-item { 
        display: inline-block; 
        padding: 1.25rem; 
        margin-right: 1rem; } 

I generally prefer to either have completely uncompressed CSS or completely compressed. For uncompressed CSS pass the value expanded to the style option, or if you want minified CSS, set it to compressed. To set your output style use the --style option, like so:

Sass --force --update sass/style.scss:css/style.css --style=expanded

Sourcemaps

You may also want to compile without sourcemaps once your project is ready to be deployed or uploaded to a git repository (although a .gitignore file is more suitable for this). To achieve this you can pass the --sourcemap=none option:

sass --force --update sass/style.scss:css/style.css --style=compressed --sourcemap=none

Tip

You can press the up arrow to cycle through your previously entered commands so you don't have to keep typing them over and over.

For all the available option you can visit the Sass documentation at http://sass-lang.com/documentation/file.SASS_REFERENCE.html#options.