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!
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
We can do that by executing this command in the terminal at the root of the folder:
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:
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
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!