How to Add Compass Syntax Support to Jetbrains PHPstorm

How to add Compass syntax support to Jetbrains PhpStorm?

It's explanation of Martin's answer.
Symlink to compass gem directory in your sass folder works great.

Instruction(Windows)

1. open cmd with admin privileges
2. change path to your project sass folder, for example cd projectname\sass
3. run mklink /d compass $GEM_LOCATION\frameworks\compass\stylesheets\compass, as for me $GEM_LOCATION = C:\dev\Ruby200\lib\ruby\gems\2.0.0\gems\compass-0.12.2

Thats all, now PhpStorm will not highlight compass mixins as errors, and will add them in autocomplete suggestions.

Warning: If you want to delete created symlink DON'T use delete, it will remove source directory.
open cmd with admin privileges, cd $yourProjectSassPath, and run rmdir compass

How to use compass in phpstorm?

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.

Using Compass in PHPStorm 7

After all, there is an issue on Windows.
There's the solution, and it works. Thanks LazyOne.

http://youtrack.jetbrains.com/issue/WEB-9139

phpstorm - @import compass cannot resolve

Eventually the only way I found to get it working is creating a Symlink between my sass folder and
my compass executable;

I found an old answer on this that helped me...

---

in detail:

1.Open Cmd (as admin) and change dir to your sass folder in your project .

2.From your sass-folder create a symlink with mklink /d compass C:\Ruby200-64\lib\ruby\gems\2.0.0\gems\compass-1.0.1\bin\compass .

Now phpstorm works fine (with default filewatchers)_

How does the doT.js Plugin for PHPstorm work?

I found the solution myself.
In order for the doT-Plugin to highlight doT-Template-Sytax, I had to create files with the .dot-extension instead of the ".html" extension I had before.

But if anyone sees this and decides to use this solution, be aware that changing your .html-Files to .dot-Files wrecks PHPStorm's autocompletion of html-Code inside of these files.

---

Related Topics