Configuring grunt to compile sass, scss file is quite simple and straightforward. However, as I use the recent version 1.01, the task just hangs without doing any compiling. I’ve tried using grunt-contrib-sass and grunt-sass without any luck.

What’s the solution

I’ve spent hours searching for solution on Google but couldn’t find one. So, I came up with an idea: why do I have to rely on grunt? Using sass directly in the command line is very simple and the task completes quite quickly.

How do I set up?

The setup is very simple, you can write the following code in the command line to compile a sass/scss file to css file.

sass --watch source-file1:destination-file1 source-file2:destination-file2

As you can see, you can pass multiple source:destination pairs

Now, as your source files change, sass will compile to the destination file automatically.

What if I want to compress the destination files?

If you want to minify the destination files, simply put –style compressed option into the command

sass --watch --style compressed source-file1:destination-file1 source-file2:destination-file2

Now, your destination files will be minified.

I want to watch a folder with many files, what should I do?

Honestly, if you watch changes from a folder contains many files, sass may take a long time to compile to .css file. This is why I only watch changes on a few .scss files which import other partials. When I want to compile to .css file, I simply go to that file and add a space.

This strategy will save your computer from compiling sass all the time. On old computer, you may hear the fans’ noise constantly.