First, make sure that Ruby is installed on your computer.
Then install Compass (you can use the built-in Terminal in WebStorm for that):
You can find a little bit more information on Compass installation here.
When using Compass in the new project, you can run
command in WebStorm’s Terminal. It will add folders for SCSS and CSS files and create config.rb file for Compass in the project root.
The prompt displayed at the top of a new .scss (or .sass) file will suggest adding a new File Watcher for automatic compilation of SCSS/Sass to CSS.
Dismiss this suggestion, since Compass requires a different File Watcher.
Press Alt+Enter to apply the quick-fix suggestion to configure Compass for your project. Alternatively, go to Settings | Compass Support to enable Compass Support.
Check Enable Compass and specify a path to Compass executable and a path to the configuration file in your project.
Adding File Watcher for Compass
In the new prompt at the top of .scss or .sass file, click Add Watcher to automatically generate CSS files from SCSS or Sass with Compass.
Macros for input and output files paths will be set relative to the config.rb file. You’ll get compiled CSS files automatically when SCSS (or Sass) is modified.
Configuring File Watcher for custom project structure
If you want to configure Compass for the project with custom structure, where config.rb is not in the project root, you need to make sure that:
- The path to the config.rb file in Compass Support settings is correct; and
- The path in Arguments input and Output path to refresh in the File Watcher point to the right locations.
For example, we have a project structure like this:
Then, in Compass Support settings, the path to config.rb should be:
The File Watcher configuration should be as follows:
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.