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.