How to Compile Sass with Sublime Text

In a previous post from our Sass series , we showed you how to compile Sass into regular CSS format using Command Line. However, since not everyone might enjoy working with Terminal, this is a tip of how you can do the same using Sublime Text instead.

Compiling Sass into CSS in Sublime Text is possible with a plugin called SassBuilder, which you can install through Package Control (see screenshot).

Configuration File

Before you can compile Sass, you need to create a configuration file, which is similar to the config.rb that you can find in a Compass project. To create the file, go to Tools > Sass Builder Config in Sublime Text. Save the file in the same folder where you store your .scss or .sass files, and name it .sassbuilder-config.

You can then configure the output of your compiled styles in this file, and here’s the default configuration:

{
  "output_path": "../css",
  "options": {
    "cache": true,
    "debug": true,
    "line-comments": true,
    "line-numbers": true,
    "style": "nested"
  }
}

SassBuilder will generate the comments and line numbers that tell us where the selectors and the style-rules were defined. These are useful when you are in the development stage, but when you are about to publish the website, you would probably need to remove them. To do that, set the value in line-comment and line-number to false, like so.

{
  "output_path": "../css",
  "options": {
    "cache": true,
    "debug": true,
    "line-comments": false,
    "line-numbers": false,
    "style": "compressed"
  }
}

The style option specifies the style for the compiled CSS – you can choose between Nested, Expanded or Compressed. Sass will automatically compile into CSS upon saving the file. If the process has been completed successfully, you’ll get the following notification (screenshot).

And that’s it, guys. We hope that you have found this little tutorial helpful. If you have any questions, please don’t hesitate to post them in the comments below.