This short guide is intended to help you set-up a File Watcher in PyCharm for SASS/ SCSS files. This feature is useful for detecting changes in these files and generating a css file at a given location.

It's quite easy to set-up SASS/ SCSS for PyCharm (or other JetBrains products) once you know how.

Installing the transpiler

First of all you need to install the SASS/ SCCS transpiler, according to the instructions here.

SASS and SCSS transpilers are managed through the Ruby Gem manager.

1. Download and install Ruby.
2. Specify a path variable for the folder where the Ruby executable file and the gem.bat file are stored. This lets you launch Ruby and Gem Manager from any folder and ensures that Ruby is successfully launched during transpilation.
3. Type one of the following commands at the command line prompt:

   $ gem install sass              

   or

   $ gem install scss          

   The tool is installed to the folder where Ruby executable file and the gem.bat file are stored.

Remember the install path for the following steps.

Configuring the FileWatcher

The second step is to configure the FileWatcher in PyCharm. Open the Preferences menu, then find the FileWatcher option and click the + sign at the bottom. Choose either SASS or SCSS. The examples in this article are based on choosing the last.

After adding the FileWatcher the following window will appear:

Change the following settings:

File type: SCSS Files
Scope: Project Files
Program: /usr/bin/scss (The install path from the first step)
Arguments: --no-cache --update --compass $FileName$:$Sourcepath$/path-to-css-compiled-from-scr/$FileNameWithoutExtension$.css

• Replace "path-to-css-compiled-from-scr" with the path to the directory where the css file needs to be put in your project. I usually directly put it in the location where the static files are served from.
• The argument "--compass" is added so the transpiler knows it should be included (hench avoiding import errors). Don't forget to install compass ($ sudo gem install compass). This saves you the trouble of creating and managing "config.rb" Ruby config files.

Working directory: $FileDir$
Environment variables: <empty>
Output paths to refresh: $Sourcepath$/path-to-css-compiled-from-scr/

• Same as the path at the arguments setting without the filename. The path will be refreshed after generating a new CSS file.

Once configured you can reuse it in every project.

Enjoy!


More info:
http://www.jetbrains.com/pycharm/webhelp/transpiling-sass-less-and-scss-to-css.html
http://www.jetbrains.com/pycharm/webhelp/using-file-watchers.html