CODEWITHSUNDEEP
csscompass-sassphpstorm
Madara's Ghost
Madara's Ghost

Reputation: 174987

How to add Compass syntax support to Jetbrains PhpStorm?

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.

Upvotes: 18

Views: 8458

Answers (5)

Dave Nelson
Dave Nelson

Reputation: 166

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

Upvotes: 2

Johan
Johan

Reputation: 390

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!

Upvotes: 9

user2041974
user2041974

Reputation: 45

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.

Upvotes: 3

Maxim
Maxim

Reputation: 445

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

Upvotes: 19

Martin Schuhfuß
Martin Schuhfuß

Reputation: 6986

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.

Upvotes: 3

Related Questions