Skip to content
Enable Live Preview and compile SASS files within Brackets
Branch: master
Clone or download
jasonsanjose Merge pull request #184 from Brainzyy/master
Add more vendors and try to fix cleanup error
Latest commit 88b351f Dec 15, 2016
Type Name Latest commit message Commit time
Failed to load latest commit information.
thirdparty WIP live preview support Apr 15, 2014
.gitignore upgrade to node-sass 2.0.1. fix ruby error parsing. fix source map po… Feb 26, 2015
CONTRIBUTING Initial commit Apr 14, 2014
COPYRIGHT Initial commit Apr 14, 2014
Gruntfile.js update grunt build to include compass-options Mar 2, 2015
LICENSE Initial commit Apr 14, 2014
NestedStyleParser.js Update Mar 5, 2015
StatusBarUtil.js add custom timeout and status bar notification. update compass support. Feb 27, 2015
main.js Fix for #81 Mar 14, 2015


Compiles *.scss/*.sass files when changed. Updates styles during Live Preview. Demo video:

Compiler Compatibility

By default, this extension uses libsass 3.1. The Ruby-based sass compiler is also supported, see sass.compiler preference. For details on compatibility with the latest Sass features and popular Sass frameworks, see the wiki.


  • Compiles *.sass (indented syntax) and *.scss (main syntax) files when changed and when any partial (@import dependency) is changed
  • Generates source maps
  • Show SASS compiler errors
  • Update CSS in Brackets' Live Preview
  • Option to swap libsass for Ruby sass compiler implementation
  • Experimental Compass support

Future Plans

  • Selector highlighting



Type: Boolean Default: true

Enable/Disable compilation for a file.


Type: String Default: libsass Values: libsass, ruby

Choose which compiler to use. libsass is used by default and is bundled with the extension, no extra install is necessary. Use ruby if you need full compatilibity with 3.4 (learn more about libsass compatibility. Using the ruby options requires separate installation.


Type: Boolean Default: false

EXPERIMENTAL Enable/Disable Compass for a file. Requires "sass.compiler": "ruby" and Compass installation. Some Compass features will require a config.rb file at your project root.

As of the 2.0.x release, Compass support is experimental. Compiler workflows in Brackets are supported, e.g.:

  • Compiling on save
  • Compiler errors
  • Compiling when a partial changes
  • Source map output

Note that Live Preview is NOT supported yet. See example project for usage.



Type: String Default: <parent directory of input sass file>

A relative file path (relative to the input file) to output both the CSS file and the source map.


Type: String Default: <input sass file name>.css

File name to use for the output CSS file.


Type: Array<String> Default: []

An array of paths to use when resolving @import declarations (a.k.a --load-path, see Sass documentation)


Type: String Default: nested Values: nested, compressed

Determines the output format of the final CSS style. ('expanded' and 'compact' are not currently supported by [libsass], but are planned in a future version.)


Type: Boolean Default: false

true enables additional debugging information in the output file as CSS comments


Type: Boolean | String | undefined Default: true (implies <input sass file name>

Outputs a source map. When sourceMap === true, the values for outputDir and output are used as the target output location for the source map. When typeof sourceMap === "String", the value of sourceMap will be used as the writing location for the file.

Sample .brackets.json File

Reference: Sample project using Bourbon and .brackets.json preferences file.

Resulting file tree will appear as follows:
+ bower_components/
|--- bourbon/app/assets/stylesheets/_bourbon.scss
+ css/
|--- app.css
+ scss/
|--- app.scss

/* REMOVE comments from json file before using this template */
    /* disable compiling other files that aren't the "main" file */
    "sass.enabled": false,
    "path": {
        "scss/app.scss": {
            "sass.enabled": true,
            "sass.options": {
                "outputDir": "../css/",
                "includePaths": [],
                "sourceComments": true,
                "outputStyle": "nested"
You can’t perform that action at this time.