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

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.

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:

http://sublimetexttips.com/newsletter

Comments

  1. says

    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!

  2. Volvox says

    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/

  3. says

    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?

  4. eric socolofsky says

    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.

  5. says

    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.

  6. sinled says

    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)

  7. s1nga says

    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?

  8. says

    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?

  9. says

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

  10. says

    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 says

      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.

  11. ryan says

    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]
    [Finished]

    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.

  12. vinrav says

    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 says

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

Trackbacks

  1. […] 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 […]

  2. […] 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. […]

Leave a Reply

Your email address will not be published. Required fields are marked *