Editors/IDEs for developing SASS code that correctly handle Compass projects structure and imports?

Question

The structure of my Compass projects has outgrown the capabilities of text editors like Sublime Text or TextMate/E. Example:

I'm in desperate need for variable/mixin names aoutcompletion and refactoring capabilities: renaming variables/mixins globally, moving files without breaking imports, etc.

I've tried latest JetBrains IDEs (RubyMine, PhpStorm, WebStorm, PyCharm) but they just can't handle Compass project structure. All variables are cosidered to be undefined, refactoring tools fail and other nasty things happen. Example:

So when it comes to Compass-powered SASS development, those paid IDEs yield to general programmer's editors like vim which at least have stupid yet working autocompletion.

The question is: what are the editors and IDEs that do have full-fledged Compass support?

PS I'm on Windows, but please suggest matching software for any OS.

I did look into ctags and cscope, but neither of them supports Compass out of the box and there is no mentions over the web that at least one person have managed to make it work. For example, cscope fails to understand the imports written in the short style of the indented .sass syntax. It might be possible to write some sophisticated configuration/scripting/hack for ctags/cscope, but this is way too hard for me. I'd be happy to participate in testing of one though. — Andrey Mikhaylov - lolmaus

fmquaglia fmquaglia · Accepted Answer · 2013-04-19T14:40:25

I stumbled recently with the same sort of limitation. Here's what I did. Just go to your sass styleheets directory and create symbolic links to the compass framework source files living in the Compass gem's directory.

I assume a couple of things here:

You're using RVM to manage your Ruby versions
You're using bundler to manage your Gems
You're on a linux or os x based system

If this is not the case fear not! We will find the way.

How to find the location of this Gem's Sass source files? just execute:

bundle show compass

path_to_rvm_files/gems/your_ruby_version@your_gemset/gems/compass-version

Of course your path may vary but that's the idea.

You should navigate to that directory in which you'll find a directory called frameworks, with some other directories within:

...
|_compass-xxxxx
  |_frameworks
    |_compass
      |_stylesheets
        |_compass

In the latest one, compass is where your important compass files are. So you must create a symlink in your project pointing to that directory, and then your IDe will "figure out where the included or imported stuff is", so to speak.

How to create this symlink? Go on the terminal to the project stylesheets directory and execute:

ln -s path_to_rvm_files/gems/your_ruby_version@your_gemset/gems/compass-version/frameworks/compass/stylesheets/compass/ compass

Hopefully this will sort out the problem with Compass own variables, mixins and so on.

On regards of your custom ones, my advice is to import them all on _base.scss/sass.

I use Rubymine myself and this has been my way to go so far.

Regards!

Editors/IDEs for developing SASS code that correctly handle Compass projects structure and imports?

1 Answers