Automatically compiles SASS files on save.







sass-autocompile package

Automatically compiles SASS files on save or via shortcut, with extensive configuration possibilities.

Inspired by less-autocompile package, written by lohek, I have created a counterpart for SASS. This package can automatically compile SASS files (file ending: .scss or .sass) when you save it. Or you can use shortcuts to do that. Beside that this package is highly configurable to fit all your needs.


At the moment, you can only use this package when you install node.js and node-sass on you system. It's important that you install node-sass globally (command: npm install node-sass -g), so it's possible to access it via CLI.

The reason why sass-autocompile needs that is because node-sass is not compatible with atom shell in the current version (2.0.1), so it cannot be added as dependency. Probably that will change later, so you won't have to install node.js and node-sass additionally ‒ I put it to the roadmap.


Important: Install node.js and node-sass before, see requirements.

Basic SASS compilation

After you have installed this package, option Compile on save is enabled, so if you save a SASS file it's automatically compiled to a CSS file. Since version 0.10.0 you don't need a first-line-comment to compile SASS files any more, except you set this by option.

Alternatively you can use shortcuts for starting compilation:

  1. ctrl-shift-c: Compile SASS file to a CSS file
  2. alt-shift-c / cmd-shift-c: Direct compilation; replaces SASS text with compiled CSS

The third method is to use the Tree View context menu where you can find a Compile SASS item when right clicking on a file with .scss or .sass extension.

Note: When you want to compile a SASS file to a CSS File (→ Compile to file) the file extension must be .scss or .sass. You don't need a first-line-comment since version 0.10.0.

After compiling a SASS file, you should see a notification or a panel at the bottom of the editor, depending on your settings, showing you an error or success message. If you use panel notification (see options -> Notifications) , you have the possibility to access the output CSS file by clicking on the compilation message. If compilation fails, you can even jump to error position in the corresponding SASS file where error occurred.

When using panel notification you can use Show detailed output link in the header caption of the panel to open detailed output of node-sass command (available since 0.7.0). Additionally you can set option Show node-sass output after compilation to automatically show output after compilation.

Compile to file

This feature is the default behaviour and the method you will use most. It compiles a SASS file to a CSS file. When you save a SASS file or use the Tree View context menu this method is used.

Direct compilation

When you want to instantly compile a SASS text, you can copy it to a new tab and press alt-shift-c / cmd-shift-c shortcut. This package then compiles the SASS input and replaces it with the compiled CSS.

Options and parameters

Since version 0.10.0 there are many new options. So have a look at the package options and configure the general behaviour for compiling SASS files. In the options section everything is explained in detail.

To overwrite general options in order to use specific configuration per project you can set parameters as comment in the first line. Have a look at the parameters where any parameter is described and how you can use it.



Add following parameters in comma-separated way to the first line of your SASS file. See examples for demonstration:


These parameters are supported, but will be removed in future. Please use the corresponding parameters described above.


Basic usage

Defining a compressed output and save compiled CSS files to a relative CSS directory.

// compileCompressed, compressedFilenamePattern: ../css/$1.css

.. or in short version:

// compileCompressed: ../css/$1.css

Or you only want to overwrite some filename patterns?

// compressedFilenamePattern: ../css/min/$1.css, expandedFilenamePattern: ../css/$1.css

Main parameter

If you use @import command in SASS, you should define the main parameter in the child files. Imagine you have the following structure:

main.scss       // main file which imports colors and layout files
colors.scss     // contains color definitions
layout.scss     // contains layout definitions

Add this to colors.scss and layout.scss to enable auto compilation on saving each of these two child files.

// main: main.scss

The special about this parameter is, that when you save a child file, the main.scss is compiled, not the child file itself. So you can structure your SASS files, modify them and after saving, everything is compiled correctly, not only the saved file.

Predefined shortcuts

Issues, questions & feedback

Please post issues on GitHub.

For other concerns like questions or feedback have a look at the discussion thread on