Configure Compass,Sass,Less... in PHPStorm

Wed, Mar 13, 2013

PHPStorm 6 bundles a new feature called "File watchers" which enables Sass, LESS, SCSS, CoffeeScript, TypeScript transpilation. This option will compile your compass/scss/whatever files when the source file is saved (this is when you lose the focus or manually save).

So, for the basic stuff you can stop using external programs and watchers likeCodeKit or LESS.app now. But of course unexpensive software like CodeKit is a must have if you are a frontend developer.

Our frontend guy decided to use Compass using SCSS source files so, the following example illustrates how to configure Compass in PHPStorm under Mac OS X, but this is something reusable for the rest of the languages supported by watchers. The procedure is basically the same for the others.

First of all, you have to install Compass. To do so open the Terminal and type:

sudo gem install compass

Then go to PHPStorm and open any of the SCSS files in your project and you'll see after a second or two a message inviting you to use File watchers. This is going to add under Preferences -> File Watchers a new entry that you can edit as follows:

Program: /usr/bin/compass
Arguments (If you compile files one by one): compile  $FilePath$
Arguments: (If you have SCSS in groups with ruby configurations):
compile  $ProjectFileDir$/relative/path/to/css/

Now save the settings and every time you save one of these files you'll have the compiled SCSS file. Of course you can pass all the parameters you want in the section arguments to fit your needs. 

Ah, and this black theme is the Darcula theme that comes now bundled with the version 6.