How To: Setting up Compass with SCSS in PhpStorm

PhpStorm includes a very useful feature called File Watchers which if you’re already working with Compass should sound very familiar. From the documentation, File Watchers is defined as “..a PhpStorm system that tracks changes to your files and runs a third-party standalone application.” So basically whenever a watcher is running it will execute a program when there are changes made. This makes using Compass more straight forward since you no longer need to open a terminal/command prompt, navigate to your project, and run Compass. Or in case you forget to compile and can’t figure out why your changes aren’t appearing (we’ve all done it, I won’t judge.)

Fortunately there are a bunch of templates that come with PhpStorm out of the box, including ones for Sass/SCSS. We’re going to quickly go over how to setup Compass for SCSS, although I’m sure these instructions could be used for Sass as well.

File Watcher window in PhpStorm

First thing is to open up our settings – Ctrl+Alt S for Windows/Linux, Cmd + , for Mac and head to Tools > File Watchers. Click the blue + icon to add a new watcher, and select Compass SCSS from the template dropdown.

Compass SCSS settings

Next we’ll need to define the program path and arguments – the file type should already be auto populated to SCSS Style Sheet and scope set to Project Files. Set program to the path of Compass. This depends on your OS and if you’re using 32-bit or 64-bit versions, for Windows 64-bit it should be C:\Ruby24-x64\bin\compass.bat. Next set arguments to compile $ProjectFileDir$. These are literally the arguments you’d find if you’re running this from the command line – compile will compile our SCSS into CSS, and $ProjectFileDir$ is our project directory path where Compass is setup and our config.rb lives.

And you’re all set! Now whenever you make a change to a .SCSS file in your project you’ll see the watcher run in your background tasks. If you want to be 100% sure Compass compiled with no errors you can set the Show console option to always, otherwise it should be set to on error by default.

Tutorials , , , ,