How to use compass in phpstorm?

Tjorriemorrie picture Tjorriemorrie · Apr 4, 2013 · Viewed 19.9k times · Source

I'm aware of this question: How to add Compass syntax support to Jetbrains PhpStorm? but it doesn't help.

I just opted for copying the files over, much easier in my project. But phpstorm still complains about compass. Without compass it compiles scss using ruby 1.9.3 without problems. Is my set up correct?

enter image description here

EDIT:

This is for PhpStorm 6-

Compass is supported in PhpStorm 7+

Answer

First of all, the question that you had linked is about enabling support for Compass-style imports, and it is a workaround that does not work for every project.

Your question is about a different thing: compiling Compass projects.

Both issues will be addressed in the 7th version of PHPStorm, which is not going to be released soon: the 6th version has just been released. For now, there's a number of workarounds.

Compiling Compass projects with PHPStorm manually

  1. Go to the External tools section of PHPStorm IDE Settings.
  2. Create a new external tool. Name it "Compass compile manual" or similarly.
  3. Set the Program to point at your Compass binary. On Windows it's like C:\Ruby193\bin\compass.bat, on Linux and Mac it can be simply compass. But if you're using RVM, then the Program should be bash.
  4. The Parameters field should be compile for all OSes, unless you're using RVM. For RVM the Parameters should be set to –login -c "compass compile".
  5. The Working directory field should be set to $ProjectFileDir$.

Manual compilation can be launched from the Tools menu. You can also assign a hotkey to run it quicker. Make sure that hotkey does not collide with an existing one.

Making PHPStorm compile your project whenever you save changes

  1. Make sure you have the very latest Early Access Preview version of PHPStorm. You can download it from here.
  2. Make sure you have the File Watchers plugin installed. Go to the Plugins section of PHPStorm IDE Settings, look for File Watchers. If it's not on the list, install it via Browse repositories and restart PHPStorm.
  3. Open your project in PHPStorm if you haven't done it already.
  4. Go to the File Watchers section of PHPStorm Project Settings.
  5. Create a new File Watcher. Use a custom template. Name your watcher "Compass compile on save" or similarly.
  6. Set the File type to either SCSS or SASS, depending which one you use in your project.
  7. Leave the Scope as "Project files"
  8. Set the Program to point at your Compass binary. On Windows it's like C:\Ruby193\bin\compass.bat, on Linux and Mac it can be simply compass. But if you're using RVM, then the Program should be bash.
  9. The Arguments field should be compile for all OSes, unless you're using RVM. For RVM the Arguments should be set to –login -c "compass compile". UPD: @ezekiel-victor suggests this to be: –login -c "compile --sass-dir=$ProjectFileDir$ --css-dir=$ProjectFileDir$".
  10. The Working directory field should be set to $ProjectFileDir$.
  11. Disable Check for syntax errors.
  12. Leave the rest blank and save.

Now whenever you save changes to any of your SCSS or SASS files, PHPStorm will tell Compass to compile the project.

UPD If you're using Bundler (there's Gemfile in your project and you do bundle install to fetch dependencies), you shoud use bundle exec compass compile instead of compass compile. This means that you have to use the bundle executable (bundle.bat on Windows) instead of compass (compass.bat) and adjust the Arguments field accordingly.

Running compass watch manually in OS console (recommended)

The problem with running compass compile is that it's slow as it recompiles the whole project every time it is executed.

Instead, you can run a compass watch command manually in the project folder using your OS console. Compass Watch will constantly monitor your project for changes. When changes are noticed, it will recompile only the modified part, which is much faster.

Compass Watch is smart enough not to monitor every file in your project. It only monitors non-partial files (e. g. screen.scss) and partials (e. g. _layout.scss) that are imported by any non-partial file or by imported partials recursively.

If you work with your project over a network filesystem (e. g. when using a virtual machine or a development server to run your code), compilation and tracking changes become too slow. So the best option when using remote/virtual machine is to run compass watch on that machine so that it tracks changes locally and not via a network file system.

Reanimating Compass

Compass caches it's own work to make compilation faster. Sometimes the cache becomes inconsistent with project contents. This results in Compass reporting all kinds of weird errors and refusing to compile your project.

Once you feel that Compass reports an error that is not true, execute compass clean and recompile your project. Cleaning will purge Compass cache and complied files, so that it starts from scratch.

You can run compass clean manually in console or add it as a PHPStorm External Tool.