Easy SASS compilation in WebStorm / PhpStorm

by Richard Tuin

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: