≡ Menu
Sublime Text Tips

How to Add SASS Support in Sublime Text

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.

Install SASS

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 sass or scss file, Sublime just shrugs its shoulders and treats it like plain text, rendering your meticulously formatted style rules in monotonous black and white.

scss-as-plain-text

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:

scss-with-highlighting

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:

sass-as-haml

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 Sass.

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 sass or 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.

Automating Builds

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 css, js, sass, less and scss files.

22 comments… add one

  • hey Josh!
    Thanks for this post! I have been looking for a better way to develop with sass locally. In rails all this is setup for you automatically, but I havent seemed to find a ton of help out there for using sass on other projects, like wordpress, or just a quick static page.
    thanks for the share!

    • joshearl

      You’re welcome, Kory! Glad it was helpful.

  • Volvox

    Great post, thanks a ton. On Sublime Text 3, just git clone the SASS Build plugin repo and you will need to clone the sublime tree from sass-textmate-bundle plugin dump them into (Mac OSX) ~/Library/Application Support/Sublime Text 3/Packages/

  • I have a problem when compiling the code:

    The console of Sublime Text says:

    [Errno 2] No such file or directory

    [cmd: [u'sass', u'--update', u'/Users/alex/Desktop/Project/assets/styles/builtins.scss
    :/Users/alex/Desktop/Project/assets/styles/builtins.css', u'--stop-on-error', u'--no-cache', u'--style', u'compressed']]

    [dir: /Users/alex/Desktop/Project/assets/styles]

    [path: /usr/local/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin]

    [Finished]

    And no file is being compiled to css. What can I do to solve this problem?

  • Thanks for the tips, this got me up and running in about a minute!

  • eric socolofsky

    I’m newish to the webdev game (tho an old hand in coding), and recently was introduced to Codekit. I’ve used and loved Sublime for a while. Does this workflow largely obviate Codekit, in terms of its benefits for working with SASS? Codekit looks great but I feel like Sublime should be able to do most of what Codekit does, via plugins.

  • Thanks for the fix for Ruby Haml getting in the way of Sass highlighting. I never knew that Sublime Text feature existed. If this were on Stack Overflow you’d have my upvote.

    • joshearl

      Glad it helped, Lawrence!

  • sinled

    Thanks for the article.
    Any ideas how to make work sass with Sublime text 3 “goto definition” function, it works fine with LESS, but not working with SASS(SCSS)

  • BeryJu

    How did you remove the Menu Bar in your Sublime Text?

    • BeryJu

      View -> Hide Menu, never mind.

  • s1nga

    Thanks a bunch. With your instructions I’ve got my first attempt at a sass tutorial up and running.

    Have run into a major snag, however, and I’m inexperieinced enough not to be able to figure out the source of my problem. Perhaps you could provide a solution…

    The tutorial requests that “@import “compass”; be placed at the top of the other import statements. Sublime returns the following error… “Sass::SyntaxError: File to import not found or unreadable: compass.”

    Obviously, Sublime is not finding compass. How to remedy this?
    When I comment-out this import statement the rest of the imports load and the project compiles as expected.
    I’m totally confused. Any insights?

  • SASS package isn’t showing up in package control. Maybe it’s because I already installed a package with that exact name or it changed?

    I am also not seeing an additional option to colour as scss.

    So what’s the deal?

  • Nevermind, I had a config issue. Sorry about that.

  • Switching to ST3 and couldn’t remember the name of the syntax package so thanks for writing this up.

    However, Josh, a minor point; it’s actually ‘Sass’ and not ‘SASS’.

    • josh

      Whoa, didn’t realize that. Thanks!

  • Know this post has gone a bit cold but…

    New to Sass and have set up Sublime Text as above and all is working fine, just one thing I’m not sure about. Do you still need Compass or Prepros to watch the Sass css files, or is this a ‘total’ Sass solution?

    • josh

      You shouldn’t need anything watching the files in the background if you set up one of the build options mentioned in the post—either adding a custom command line build step in your .sublime-project file or installing the SassBuild plugin.

  • B

    Thanks. Easy to follow article

  • Great post, thanks. Helped a lot for settling sass recognition in Sublime Text 3

Leave a Comment