Quick Answer:
sass --watch input.scss:output.css --style compressed
Long Answer:
SASS is a great extension language for CSS. It brings in a lot of features which is not available in CSS. For those of you who don’t know, SASS stands for “syntactically awesome stylesheet”. It is a CSS preprocessor.
Installation of SASS can be easily done via NPM with this command:
$ npm install -g sass
To compile SASS to CSS you would just use this command:
$ sass input.scss output.css
But when you are developing a website, you would want to the output as soon as you change it so that is where --watch comes in.
If you use the command:
$ sass --watch input.scss:output.css
The command will run continuously on the terminal and will watch for any changes that are done on the input.scss file. If it detects any changes then it will immediately compile them in the output.css file.
However, if you know a bit SEO, then you know a for a website to work fast, it has to have minified CSS and JS files. So how can you have minified CSS file as soon as you change something in your SCSS file?
It’s simple, use this command:
sass --watch input.scss:output.css --style compressed