How to compile SASS into CSS and watch for changes?

SASS extends CSS which means that you can have all the features of CSS plus the features of SASS just like a cherry on top of a cake!

Browsers don't understand SASS, just like they don't understand JSX (which is compiled into valid javascript) in React. Which is why we need to compile SASS into normal CSS in order to run it in the browser.

Let's see how we can transform a SASS file into a CSS file assuming that you have SASS already installed into your system.

Compiling a SASS file

Let's say we have a folder structure something like this:

public/
-> styles/

src/
-> styles/
    -> style.scss

We need to compile the file with .scss extension which is ultimately a SASS file, into a CSS file in public/styles directory.

We can do that by executing this command in the terminal at the root of the folder:

sass src/styles:public/styles

The directory before the colon : is the input directory and the directory after the colon is the output directory.

If you have your SASS file in the root directory and want to output the CSS file in the same root directory, you can use:

sass style.scss style.css

Here, 'root directory' means the directory you are currently pointing to in your terminal.

But what if we want to place the CSS file in the same directory as the SASS file? You can do that by executing the above command only:

sass src/styles:src/styles

Now, let's get to the juicy part. Let's see how we can watch the changes made to our SCSS file and automatically compile them into CSS.

Watching for changes in SASS

Just add a --watch flag in the command to watch the changes made to the Sass file in src/styles directory.

sass --watch src/styles:public/styles

That's it. Now, the changes you make in the SASS file will automatically be compiled into CSS as soon as you save the SASS file!

Also, if you are using VSCode, then you can use an extension to compile SASS files into CSS which makes it very convenient to deal with SASS, but that too has it's pros and cons!

Signing off.

This post was originally published in Syntackle!

Twitter | LinkedIn | GitHub