By josh / April 30, 2013

How to Add Sass Support in Sublime Text

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:

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.


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

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:

About the author


Kory Tegman - April 30, 2013

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 - April 30, 2013

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

Volvox - April 30, 2013

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/

Alexander Kazachkov - May 12, 2013

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]


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

    Ben Racicot - December 15, 2013


    Mark - July 28, 2014

    Mac OSX in terminal type following: sudo gem install sass
    This solved my problem. 🙂

      Usama - December 12, 2016

      Thanks a lot Mark. This solved it for me.

      Ton of thanks to you too Josh. This was helpful.

Patrick Hill - June 13, 2013

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

eric socolofsky - June 21, 2013

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.

Lawrence Wang - June 23, 2013

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 - June 23, 2013

    Glad it helped, Lawrence!

Sass? | David Platt - June 24, 2013

[…] like I’d seen used by the people evangelizing it at frontendconf. Luckily, I found Josh Earl’s site that walked me through every step. Seriously. Follow the links on his site and it’s really easy to set […]

Bookmarks for 26th June 2013 | Lednor.Com - June 26, 2013

[…] Josh Earl » 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. […]

sinled - June 26, 2013

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 - July 5, 2013

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

    BeryJu - July 5, 2013

    View -> Hide Menu, never mind.

s1nga - July 8, 2013

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?

    joe - August 15, 2013

    Did you find a solution for this?

Zach J - August 9, 2013

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?

Zach J - August 9, 2013

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

Ben Frain - August 13, 2013

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 - August 13, 2013

    Whoa, didn’t realize that. Thanks!

Anthony - October 28, 2013

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 - November 4, 2013

    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 - December 17, 2013

Thanks. Easy to follow article

css trick - January 28, 2014

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

ryan - October 20, 2014

hi guys im trying to compile sass through sublime and im getting the same error as others have gotten which is:

[Errno 2] No such file or directory: ‘sass’
[cmd: [‘sass’, ‘–update’, ‘/Users/Jarg/Desktop/web/omegascss/scss/_settings.scss:/Users/Jarg/Desktop/web/omegascss/scss/_settings.css’, ‘–stop-on-error’, ‘–no-cache’]]
[dir: /Users/Jarg/Desktop/web/omegascss/scss]
[path: /usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin]

i did sudo gem install sass and that did not work

also, i cant seem to get my sublim to save the .scss extension for sass syntax it keeps going back to css for some reason because thats what i had it at before i found the plug in.

Alex - October 26, 2014

Thanks for the tips.

vinrav - November 16, 2014

That was nice… and thank u … i have a quest 4 u…

I am new to SCSS.. but it strike me soooo welll…..

I badly depend on sublime css auto complete feauture… Yes yess i know it is bad habit… but will u point me to the correct direction to continue my bad habit with scss….

    vinrav - November 16, 2014

    Dont worry abt that … i figured it out…

    I simply need to change sass to css at LOWER WRIGHT corner….

    i am STUPID… I KNOW…. anyway thanks 4 this tuts….

Ashish Singh - April 22, 2015

I installed Sass Build plugin to compile the sass when I hot Ctrl+B. However, the compiled file is saved in the same folder as sass. I would like it to be saved in another foler “stylesheets”. Is there a way around this other than actually hack the python code.

    Yazmin - July 12, 2015

    Same. Did you find a solution for this?

      Yazmin - July 12, 2015

      Disregard. I found the “–watch” option. 🙂

Diving into SASS with WordPress | DANIMEDIA - April 29, 2015

[…] Here is the authority article on how to setup SASS with sublime. […]

Vaibhav - May 25, 2015

How to enable line comments and line numbers in generated compiled css ?

Please tell how to do it and which file to edit for it

Click here to add a comment

Leave a comment: