found drama

get oblique

watching Compass files in WebStorm

by Rob Friesel

While hacking on a personal project recently, I noticed that WebStorm asked me if I wanted it to watch my SCSS files and automatically recompile them. I knew immediately what this must be (“file watchers!”) and was excited because this was a feature that I’d been missing. How had I not known that this was there?

Probably the reason that I didn’t know the feature was in there was because it was a recent addition: according to this blog post,1 they released the File Watchers about a month ago.

The built-in Sass/SCSS support was a nice surprise, but out-of-the-box it’s not a particularly sophisticated solution. (As far as I can tell, it’s just compiling the SCSS to CSS as a 1:1 conversion, in-place in that directory.) Compass offers some more powerful and sophisticated features on top of Sass (such as mapping source and target directories), and what’s more — you manage those more sophisticated features in a config file, and not as a bunch of gnarly command line arguments.

So… I added Compass as an alternative SCSS file watcher in the plugin. Here’s how you can add it, too:

  1. In the Settings dialog, find the File Watchers item.
  2. Click the + button to add a new watcher config.
  3. Enter the following:
    Name: Compass
    Description: Alternate SCSS:CSS compiler
    Immediate file synchronization uncheck2
    File type: SCSS
    Scope: Project Files
    Program: /usr/bin/compass
    Arguments: compile --config $ProjectFileDir$/config.rb
    Working directory: $ProjectFileDir$
  4. Deactivate the SCSS File Watcher for that project and activate the Compass watcher.
Setting up a File Watcher for Compass in WebStorm.

Setting up a File Watcher for Compass in WebStorm.

Voila! WebStorm is now watching your SCSS files and automatically recompiling them with Compass.

I found $ProjectFileDir$ works the best for the Working Directory, but your mileage may vary. If it doesn’t work for you — experiment, see what does, and let me know if perhaps there’s a better, more universal setting. The Compass file watch is working great for me so far, and I miss it already on those projects which have Sass but not Compass.

Apparently, the File Watchers plugin ships as a standard feature for both WebStorm and PhpStorm but it’s also a stand-alone plugin for their other IDEs — so you can download/install it right from inside Idea or RubyMine or any of their other IDEs.

  1. Which, looking now — after writing this blog post: it seems that a few folks in the comments have already written posts about how to set up a Compass File Watcher. But since when do people read the comments section of anything? []
  2. You could leave this on; but I find that it runs too frequently when it is checked. []

About Rob Friesel

Software engineer by day, science fiction writer by night. Author of The PhantomJS Cookbook and a short story in Please Do Not Remove. View all posts by Rob Friesel →

4 Responses to watching Compass files in WebStorm

JoeFlash says:

If you get the latest WebStorm 7 and have SCSS and Compass already installed, then WebStorm will create the watcher for you automatically.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

*