Note: This is my most popular posts, but there are a lot more killer Sublime tips where this came from. Sign up here to get them: http://sublimetexttips.com/newsletter
Sass, short for Syntactically Awesome Style Sheets, is a massively popular tool for web developers that takes a lot of the pain out of writing CSS. Unfortunately, Sublime doesn’t provide a lot of help if you want to use SASS in your project.
Package Control lists a number of seemingly useful plugins, but each provides just one or two Sass features–none of them gives you everything you need to use Sass effectively. Then there’s the whole compiling thing–messing with a separate command line tool every time you want to make a CSS tweak is a royal pain.
Here’s the setup I use that makes working with Sass as seamless as using plain old CSS.
Since this isn’t a Sass 101 tutorial, I’m going to assume that you’ve already installed Sass and know how to use the command line compiler. If not, here’s a good walkthrough.
I’m also assuming that you have Package Control set up in Sublime. If you haven’t encountered it yet, Package Control lets you install hundreds of plugins with just a few keystrokes—without leaving Sublime. The Package Control site includes setup instructions.
Configure Syntax Highlighting
The first time you open a
scss file, Sublime just shrugs its shoulders and treats it like plain text, rendering your meticulously formatted style rules in monotonous black and white.
Package Control lists a handful of plugins that add syntax highlighting for SASS. The runaway favorite is the sass-textmate-bundle plugin, called simply
Sass in Package Control.
After you install the Sass plugin, when you open a
scss file you’re greeted with beautifully highlighted code:
But don’t celebrate yet–if you open a
sass file, you’ll find it’s still devoid of color. What gives?
If you look in the lower right-hand corner of the screen, you’ll see a clue:
As it turns out, a line in the
Data/Packages/Rails/Ruby Haml.tmLanguage file is hijacking the
sass extension and incorrectly setting the syntax to
Ruby Haml instead of
I’ve seen “fixes” for this problem that involve editing the
Ruby Haml.tmLanguage file itself, or one of the files in the Sass plugin. That’s a bad idea because future updates to either of those packages will overwrite your customization, and you’ll be back where you started.
Fortunately, the simplest fix is also the best: Sublime allows you to specify what syntax to use for a given file extension.
To force Sublime to correctly highlight
sass files: 1. Open a
sass file. 2. Click View | Syntax | Open all with current extension as … | Sass.
Compiling from Sublime
Messing with the command line Sass compiler is a bit of a hassle–and it’s unnecessary. With help from a couple of plugins, you can configure Sublime to automatically compile your SASS stylesheets every time you save a change.
Sublime’s build system feature allows you to create custom build tasks and associate them with specific file types. You can do this by hand in your
sublime-project file, or you can let the Sass Build plugin handle the heavy lifting for you.
Installing the Sass Build plugin creates two new entries under Tools | Build: Sass and Sass – Compressed.
Compiling your Sass files with this plugin is simple. While editing a
scss file, just hit Ctrl+B on Windows or Linux or Command+B on OS X.
By default, Sublime will use the regular Sass build option, which compiles your Sass and formats the CSS output for easy readability.
To create minified CSS files for production, change the build option by clicking Tools | Build | Sass – Compressed.
Building your Sass files straight from Sublime is convenient, but at some point you’re going to spend 30 minutes debugging a crazy stubborn CSS issue only to realize that you actually fixed it 25 minutes ago and just forgot to recompile the
scss file. Not that I’m bitter or anything.
You can avoid this by installing the SublimeOnSaveBuild plugin, which will automatically execute the default build action whenever you save changes to a file. (It’s also handy when you’re working with CoffeeScript.)
SublimeOnSaveBuild supports a filename filter, and by default it’s only configured to run for
P.S. Now that your Sass workflow is humming along, it’s time to level up the rest of your Sublime game. Go here to see how: