On a recent project I have started to use SASS. SASS is a CSS pre-compiler which is very similar to LESS, which i have used a lot before. I am not going to go into the details over which I think is better, there are many SASS vs LESS comparisons on the web, and I haven’t used SASS enough to pass judgement.

One trick I have found with SASS that comes in really handy, is using a SASS watcher. The watcher will try to compile your stylesheet as soon as you have made any updates to your sass or scss files. It is clever enough to detect changes to any files that use @import so don’t worry about setting up multiple watchers, the one will do.

To set up a watcher, open up terminal and browse to your styles directory, then run the following command:

sass --watch yourSassFileName.scss:yourCssFileName.css

Obviously you’ll need to change the filenames to the correct filenames specific for your project.

Also its worth noting that the filenames do not need to be in the same directory. You could run the following command to compile SASS files from other directories to your compiled CSS file:

sass --watch path/to/yourSassFileName.scss:yourCssFileName.css