How to use compass in phpstorm?

Question

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 pr

Answer 1

If it helps anyone - on Snow Leopard, compass is installed in the following directory (obviously version numbers in the path depend on the installed version):

/Library/Ruby/Gems/1.8/gems/compass-0.12.2/bin/compass

So for the Program: option you can select it there.

Answer 2

Please check comments in corresponding ticket (Support for Compass) on JetBrains issue tracker: few comments have instructions on how to make it work even in current versions of the IDE:

http://youtrack.jetbrains.com/issue/WEB-5802#comment=27-471454

Answer 3

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.

Answer 4

I am using PhpStorm 2017.1.4

Setting the Ruby path variable and enabling compass in PhpStorm did not work out for me.

I could not use compass from the project directory ("Failed to run Compass") because the terminal could not resolve the command compass with the executable from the Ruby instal dir.

Thus, I permanently set a windows (using win10) environment variable following this explanation.

Quick explanation:

• Assuming you have already installed ruby and compass.

• Go to: Control Panel -> System -> Advanced System Settings -> Environment Variables...

• Add C:\Ruby22\bin to your PATH variable

• Restart PhpStorm

Further advice:

If you imported your Project from a different system it might help if you delete your config.rb filed and run compass init from your project root.