There are so many packages for building sass and scss files in Sublime Text 3, but I think a lot of them make it more complicated than it needs to be.

I prefer to use the official Sass compiler already on my system and just make a .sublime-build file for it.

Save this under your Sublime Text Packages/User folder as sass.sublime-build:

{
   "file_regex": "^([^:]*):([0-9]*):.*$",
   "selector": "source.scss, source.sass",
   "cmd": [
      "/usr/bin/sass",
      "--unix-newlines",
      "--trace",
      "--style=compressed",
      "--default-encoding=UTF-8",
      "$file",
      "$file_path/$file_base_name.css"
   ]
}

After saving, it should appear in your Build System menu as sass.


If you prefer to use the Wellington Sass compiler, use this sublime-build file instead:

{
   "file_regex": "^.{20}Error > ([^:]*):([0-9]*)$", 
   "selector": "source.scss, source.sass",
   "cmd": [
      "/usr/bin/wt",
      "compile",
      "--build=$file_path",
      "--comment=false",
      "--source-map=true",
      "--style=compressed",
      "--time=true",
      "--debug",
      "$file"
   ]
}

If you would like to know more about making your own .sublime-build files, the reference is located here:

http://docs.sublimetext.info/en/latest/reference/build_systems/configuration.html

← Older Newer →

Response (1)

  • Hi I just wanted to say THANK YOU. I spent hours bashing my head against a wall because Sass​Builder for sublime text 3 was throwing an error Unable to open Packages/Javascript/JSON.tmLanguage, and I couldn't figure out where the configuration file was supposed to go. I had this working in sublime text 2 with another Sass Builder but that apparently stopped working recently.

    This method works great! Thanks again!

Leave a Reply

You must be logged in to post a comment.