Easy SASS compilation in WebStorm / PhpStorm

If you are a regular reader, you might have noticed i have started using SASS a while go. If you are not, and don’t know what sass is, you can read my previous post on sass here.

Recently Webstorm/PhpStorm introduced the support for sass syntax highlighting, which is really awesome, but the compilation of SASS files is not integrated in the IDE.
There is however a way to set up Webstorm/PhpStorm to use external tools, which is perfect to make sass compilation from within the IDE possible.

Just follow the steps below, and you can enjoy the comfort of SASS compilation from within your favourite IDE.

Open the Settings panel: File > Settings

Then go to “External Tools” and click “Add…”

The following screen shows up, fill in the values you see (but point the “program” field to your sass installation path)

Now, right click on your SASS (or scss) file, and the sass tool will be right there, as you can see in the screen below.

Some additional useful tips:

  • Alternatively, if you prefer the one time compilation, or other sass parameters, just change the “parameters” field, or create some duplicates of this external tool setup.
  • If you work with “deploy to FTP” on save, make sure to enable the “Upload external changes” option.
  • Very helpful, thanks for that!

  • Ricardo Schalch

    Here´s the following error :
    ‘”ruby.exe”‘ is not recognized as an internal or external command, operable program or batch file.

    Process finished with exit code 1

    The path variable is set correctly , what can it be ?

    • Yeah I get the same problem…

      • Anonymous

        I found this problem occurring when the working directory was not set to /path/to/ruby/bin.

  • Robert Wildling

    Thanks very much! Very, very, very helpful!!! Worked immediately on Mac!

  • Dennis Baum

    Works great, Tnx!

    Settings for OSX:
    Program: /usr/bin/sass
    Parameter: –watch “$FilePath$”:”$FileDir$/$FileNameWithoutExtension$.css”
    Working Directory: $ProjectFileDir$

    • Oskar Risberg

      Worked great. Even added
      –style compressed
      to the end of the Parameter to output it compressed.

      Parameter: –watch “$FilePath$”:”$FileDir$/$FileNameWithoutExtension$.css” –style compressed

  • Nick

    How can you make it compile into other dirctory, like ../css ?

  • Hinerangi

    Very cool idea! How could I modify this to do a Compass watch on directories to take advantage of spriting?

    • Frederik Krautwald

      I was trying to accomplish the same with Compass.

      Program: /usr/bin/compass
      Parameter: watch
      Working Directory: $ProjectFileDir$

      Of course, the Compass config file must reside in the project file directory. Compass loads up fine and begins to watch for changes which it also detects successfully. However, Compass fails to overwrite the CSS files as specified in the config file.

      Any clues?

      EDIT: My name doesn’t appear. WTF ?!?
      EDIT: Now it’s there.

  • uvegla

    I love those $FilePath$ and so variables, but i cant find a definitive list of those available in PHPStrom. Can someone point me in the right direction?

    • Frederik Krautwald

      Press “Insert Macro” next to the field where you want to insert a variable, and you can choose different macros that will be inserted as variables.

      • uvegla

        Oh my, it was right there all along. Thanks!

  • Benedikt Frühling

    Thank you. Very helpful. Greetings from Germany