SASS compiler in PhpStorm using File Watcher

I used to compile Sass files using grunt which I'd run from the command line. This was great but since I moved over to using PhpStorm as my IDE, I discovered a better, cleaner way of compiling Sass files. The reason why it's better verses the old way I was doing it:

  1. I had to install a whole load of grunt packages for every project.
  2. I had to create a gruntfile.js and package.json file for every project.
  3. Just to add Sass files, I need to alter the gruntfile.js to include them on compile.
  4. Had to start the watcher on the command line.
  5. My project would be cluttered with the gruntfile.js, package.json, and the grunt package files.
  6. It was too complicated to compile Sass files in both module and theme folders.

Setting up Sass compiler with PhpStorm

I'm using Windows, so the first thing I have to do is install the Windows version of Ruby here: http://rubyinstaller.org/downloads/. During install, it will ask you add system PATH so you can run it from anywhere. Make sure that option is checked.

Then on the command line, install SASS:

gem install sass

and you can check that installed correctly by doing:

sass -v

Now in PhpStorm you have to add File Watchers. File Watchers is a plugin so do make sure that is installed first. Go to File > Settings > Tools > File Watchers and then click the green plus sign located top right. Choose SCSS from the list. In my case it auto detected the program located at: C:\Ruby23-x64\bin\scss.bat.

For my needs I want the compiler to compile to parallel SCSS and CSS directories throughout my project:

|-CSS

|-SCSS

So to do that I set Arguments to --no-cache --update --style compressed $FileName$:$FileParentDir$/css/$FileNameWithoutExtension$.css

Then I set Output paths to refresh to $FileParentDir$/css/$FileNameWithoutExtension$.css

Note I added --style compressed to minify the CSS but this is optional.

One last step is to put the following in your .gitignore file:

# Sass
*.css.map