Blog Blog
Home
Home/WebStorm/Using Compass in WebStorm

Using Compass in WebStorm

Ekaterina Prigara

Sass and SCSS extend CSS with variables, mixins, selector inheritance and other nice features that make CSS much friendlier for modern development. The Compass framework is built on Sass, adds a variety of great reusable patterns, and in general makes development with Sass and SCSS much better.

Follow these steps to set up Compass for your project in WebStorm.

First, make sure that Ruby is installed on your computer. Then install Compass (you can totally use the built-in Terminal in WebStorm for that): gem install compass

You can find a little bit more information on Compass installation here: http://compass-style.org/install/

If you’d like to use Compass in the new project, you can run the command: compass init in WebStorm’s Terminal. It will add folders for SCSS and CSS files and create a config.rb file for Compass in the project root.

Now let’s create a new .scss (or .sass) file.

WebStorm will suggest adding a new File Watcher for automatic compilation of SCSS/Sass to CSS. Let’s dismiss this suggestion since we know that we are going to use Compass and it requires different File Watcher.

Type
@import “compass”

WebStorm is not aware of the Compass configuration yet. It will suggest a quick-fix to configure Compass for your project. Press Alt+Enter to apply this quick-fix, or alternatively go to Preferences/Settings | Compass Support to enable Compass Support.

Check Enable Compass.

enable-compass-upd

Now WebStorm will offer you to add File Watcher for Compass. Macros for input and output files paths will be set relative to the config.rb file. You will get compiled CSS files automatically when SCSS (or Sass) is modified.

compass-prompt

If you want to configure Compass for a project with a custom structure where config.rb is not in the project root, you need to make sure that:

  1. The path to the config.rb file in Compass Support settings is correct; and
  2. The path in Arguments input and Output path to refresh in the File Watcher both point to the right locations.

For example, we have a project structure like this:

Then, in the Compass Support settings, the path to config.rb should be:

compass-path-adv

The File Watcher configuration should be as follows:

fw-compass-upd

If you’ve moved your config.rb and/or folders with CSCC/Sass and CSS files after you had configured Compass once, don’t forget to update paths in config.rb and Compass Support settings and also update paths in the File Watcher.

Comments below can no longer be edited.

13 Responses to Using Compass in WebStorm

  1. Kurt Stirnkorb says:

    March 28, 2014

    I’ve been setting up WebStorm 7 with absolutely no issues whatsoever when initializing Compass. I have just downloaded the new version (8) and when I run “compass init” from the terminal window of a new project I get:

    C:\Users\kstirnkorb\WebstormProjects\TestProject>compass init
    directory sass/
    directory stylesheets/
    create config.rb
    Errno::EACCES on line [“897”] of C: Permission denied – (C:/Users/kstirnkorb/WebstormProjects/TestProject/config.rb20140328-8100-ppoa0c, C:/Users/kstirnkorb/WebstormProjects/TestProject/config.rb)

    So I don’t know what to do. Can you please advise? Is this possibly a bug with the latest version?

    Thanks!

    Kurt Stirnkorb

  2. Dennis Erny says:

    April 10, 2014

    Thanks for this….

    I do have a question though and that is how to get Live Edit (using the Chrome connector plugin) to automatically update the browser when a Sass file is changed and compiled to CSS. My Compass file watcher works fine and I have set the refresh directory to the folder containing the final CSS but the changes do not get reflected in Chrome.

    Any thoughts?

    Cheers,
    Dennis

    • Ekaterina Prigara says:

      April 10, 2014

      It should work, though with possible delays, similar to Stylus in this video: http://www.youtube.com/watch?v=TQfoRKsOfsc
      Does it work for you with Sass file watcher (not Compass)?

  3. Michael Chambaud says:

    September 15, 2014

    I get this error: Individual stylesheets must be in the sass directory.

    but it works fine when I do compass watch

    Any thoughts?

    • Ekaterina Prigara says:

      September 16, 2014

      Would really appreciate if you report it as an issue on our tracker and provide a bit more details. Thanks!

      • Elizabeth Hill says:

        September 19, 2014

        Did a issue for this behavior get entered? I am getting the same message from within IntelliJ Idea even when “compass watch” works correctly in a cmd window.

        • Ekaterina Prigara says:

          September 20, 2014

          It seems like there might be a problem with the file watcher path configuration. Please have a look at these issues: WEB-9812 and WEB-10133 or contact our tech support. Thanks!

  4. Maik Petersen says:

    January 4, 2015

    Individual stylesheets must be in the sass directory. –

    No solution for this Issue???

    • Ekaterina Prigara says:

      January 4, 2015

      You can configure the directory in the Compass config.rb file (update sass_dir).

  5. Humberto says:

    April 8, 2015

    It works ok on OSX 10.10 with PHPStorm 8.0.3.
    Awesome!! Thanks

  6. stephen says:

    October 10, 2017

    The problem is this doesn’t copy the structure after scss
    so scss/dir/dir/file.scss will compile to stylesheets/file.css

    • lena_spb says:

      October 11, 2017

      Works fine for me – folder structure is preserved. What compass version do you work with?
      BTW, I had to change the file watcher settings to

      Arguments: compile $ProjectFileDir$
      Working directory: $ProjectFileDir$

      (I have my config.rb in project root directory) to get rid of Individual stylesheets must be in the sass directory error (https://github.com/Compass/compass/issues/1769)

.NET Tools Guide

Latest Tweets

Related posts