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.

Sass – Stylesheet tool

Sass logoNow this tool you are going to read about is nothing new. In fact, it’s been around since 2007 according to Wikipedia, but i have to share it with you because it will make your life easier!

“Syntactically Awesome Stylesheets” is what Sass stands for and is a tool to make several things related to writing and deploying stylesheets easier. It is a command line tool written in Ruby, and is available as a ruby gem.

For writing stylesheets Sass has a couple of (language)features. For instance it supports variables, calculations, includes and this thing they call ‘mixins’; some sort of templates or functions.

Sass or actually, since version 3 they call them .scss, files need to be converted to normal a CSS file so you can use it like any other CSS file in your browser. This conversion is being done by the command line tool.

One of the most interesting features of this tool is that you can tell sass in what format it needs to output the css format. It can render normal (extended) css, but also in a compact or compressed way.
This is useful when you have deployment scripts for different environments.
Also, while developing, don’t worry about having to run the command every time while: with the –watch switch sass will automatically watch your scss file for changes and render a new css file each time it’s saved.

I really like tools that are easy to use, require no configuration and require no alteration of my workflow process and Sass is definitely one of them!
If you want to learn more about Sass or want to start using it right away, check out their website!