Compile SASS/SCSS From The Command Line

If you’re a first-time-caller-long-time-listener to my Medium articles you’ll know that my last article “Do I really need a bundler?” was about bundlers and task runners .

In that article, I described how you can compile SCSS (a different syntax from actual SASS but sometimes used interchangeably with SASS) from the command line (you might only know this as the Terminal on MacOS or the Command Prompt on Windows).

In this article I’m going to demonstrate how you can quickly install and configure the Sass command line utility to compile your SASS files. Official documentation found here.

It should come as no surprise that using this method you first still need to have Node.js installed.

Now run this command to install the sass package globally:

npm install -g sass

Note: The previous command may need to be prefixed with sudo depending on your user permissions.

Once that’s finished running that, you can scroll down to Running SASS.

Navigate to your project directory and run the following command:

npm install sass

The executable file for the sass utility is now stored in your node_modules/.bin directory in your project.

If you’d like to dynamically (temporarily) alias that command so that you don’t have to keep typing it all out, you can run the follow to create an alias:

alias “sass=node_modules/.bin/sass”

You can scroll down to Running SASS

For Windows: Chocolatey, Scoop.

For MacOS: Brew.

You can scroll down to Running SASS

Check out dart-sass’ Github releases page and download the appropriate package for your operating system.

Let’s test this sucker out by creating a file called main.scss in our project directory and adding some SCSS code:

div {
  p {
    color: blue;
  }
}

Save it and we’ll compile it to CSS.

The most basic use of the app would be to call the sass command and provide the command your source file and the target path:

sass main.scss bundle.css

This is called the one-to-one mode.

Run the above command in your project root and you should see 2 new files

bundle.css
bundle.css.map

In your compiled output file bundle.css you should see something like:

div p {
  color: blue;
}
/*# sourceMappingURL=bundle.css.map */

The default sass command has compiled our SCSS code and created a sourcemap file. Learn more about sourcemaps here.

Sweet. We’ve done it! But odds are you’re going to want to configure it to suit your particular project.

It’s worth mentioning that unless you previously installed SASS, the above installation installed an implementation of SASS called Dart-Sass.

To verify this, you can run sass --version and it should output something like this:

λ sass — version
1.32.8 compiled with dart2js 2.10.5

If you get something back about Ruby Sass then you have an older and deprecated implementation of SASS and some of the following commands may not work as I describe in this post.

Watch Your SASS For Changes

This is perhaps the most important option available, and as you would assume it watches the source file(s) and their dependencies for changes and recompiles them when changes are detected.

Running SASS with the --watch option will look like this:

sass --watch main.scss bundle.css

The bundle.css compiled code should still look the same, the only thing different with this option is the automatic recompilation upon file changes.

Many-To-Many Mode

Maybe though, your project doesn’t have a single entry file with imports — and instead has a few files that need to each be compiled and output to separate output files. If so, this option is for you.

Let’s say you have a components directory at /scss/components/ with a button.scss, input.scss, and modal.scss.

You want those bad boys going straight into another components directory in your /assets/ directory after compilation. This should do the trick:

sass --watch scss/components:assets/css/components

As you can see, we’re also watching for changes.

The syntax here is sass --watch <source dir>:<output dir>.

Disable Sourcemap Output

If you don’t want sourcemaps because they’re cluttering up your project or for some other reason, you can add the --no-source-map flag.

Note: The order of this flag seems to matter. I have it before the source and target file paths.

sass --watch --no-source-map scss/components:assets/css/components

You can find an exhaustive list of all the command’s options on the Dart-Sass documentation.

Unfortunately, some of the options from the Ruby Sass implementation are not available yet in dart-sass, but will likely be introduced into the new implementation at some point.

Hope this helped y’all get started with SASS CLI compilation.

Code on you lil’ web assassins!