How to add Compass syntax support to Jetbrains PhpStorm?

18
votes

I'm using JetBrains PhpStorm, which is probably the most epic IDE I've ever used.

The question is simple. How do I add Compass syntax support to it? I've got it installed, it renders and works, but PhpStorm still complains about undefined imports and mixins.

How can I resolve this? Can Compass be included as an external library?

Edit: I'd just like to note that this feature request is for the RubyMine IDE (also by JetBrains), it's not for PhpStorm/WebStorm.

5
csscompass-sassphpstorm
youtrack.jetbrains.com/issue/RUBY-8299 I guess - LazyOne
@LazyOne: Don't think so, it's listed under the Ruby project, not under the WebStorm/PhpStorm one. - Madara's Ghost
If that is the only reason -- then you are wrong, I'm afraid. Any issue for JavaScript or Deployment (S/FTP/S) or HTML or Spell Checker etc in RubyMine will be transferred to PhpStorm project as it is home for such issues. At the same time Ruby project is home for SASS/SCSS/LESS/HAML issues. You have to keep in mind that Compass is built on top of SASS, and SASS/SCSS support in PhpStorm is done via plugin (which is true for almost all functionality). Therefore it is the correct issue to look after. - LazyOne

5 Answers

19
votes

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

9
votes

As the above user mentioned it also works to add the path to the Compass stylesheets as a resource directory in your project.

For example, my compass stylesheets are located at: C:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets

  1. Go to Settings > Project settings > Directories.
  2. Add a content root
  3. Add the compass stylesheets directory
  4. Click 'Resource Root' (the blue icon)

When you apply you will see that PhpStorm finds the compass stylesheets without any problems. You can even ctrl+click (windows) on them to open them directly.

Good luck!

3
votes

I solved it by placing a symlink of the compass-directory (from $GEM_LOCATION/frameworks/compass/stylesheets/compass) into the folder where my stylesheet lives. It's more of a workaround but it makes me and the phpstorm-inspections/-autocompletion happy.

3
votes

I think it's better to add the directory in the Directories settings: http://www.jetbrains.com/phpstorm/webhelp/directories.html

In the example above, add a new content root of C:\dev\Ruby200\lib\ruby\gems\2.0.0\gems\compass-0.12.2.

2
votes

This is more easily fixed by using a better source for the executable.

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

In Windows, use an executable path like:

C:\Ruby200\lib\ruby\gems\2.0.0\gems\compass-0.12.2\bin\compass

While on the Mac use something like:

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