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:
- I had to install a whole load of grunt packages for every project.
- I had to create a gruntfile.js and package.json file for every project.
- Just to add Sass files, I need to alter the gruntfile.js to include them on compile.
- Had to start the watcher on the command line.
- My project would be cluttered with the gruntfile.js, package.json, and the grunt package files.
- 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:
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:
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
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