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.
Share this post:
    • 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