Compile SASS, Sublime Text Windows

Follow these installation instructions to start using SASS with Sublime Text. You’ll be able to save your SASS (.scss) file, and it will compile to a CSS file automatically. There are a few more extensive guides out there on this, but they skipped over a few minor things that you may miss.  This boils it down to the essentials that you need to get up and running.

How to Build .scss with Sublime Text:

  1. Install Ruby: Download Ruby for Windows. When you run the installer, choose the option Executable in PATH
  2. Install SASS with Ruby: Open your Start menu and type “cmd” to open a command prompt. Type “gem install sass” and press enter. Gem will do its thing and install.
  3. Install Package Manager for Sublime Text: You may already have this installed if you’ve been installing other extensions. Follow the installation instructions on the plugin’s website.
  4. Use Package Manager to Install “SASS”: This package is for syntax highlighting. Open the command panel with Ctrl+Shift+P and run “Package Control: Install Package”, then type SASS to find the package to install and press Enter.
    • There probably is a conflict where the syntax highlighter thinks your files are HAML. Rather than modifying your Ruby highlighting settings as some articles show, you can do this when you have an .scss/.sass file open:
      View -> Syntax -> Open all with current extension as … | Sass
  5. Use Package Manager to Install “SASS Build”: This will allow your SASS/SCSS files to be compiled.
  6. (Optional) Use Package Manager to Install “SublimeOnSaveBuild”: Use this if you want to compile whenever you save, rather than using the separate keyboard shortcut for build (Ctrl+B).
  7. Restart Sublime Text
  8. Save your .scss file, and voila, the corresponding .css file of the same name will appear in the directory.

Helpful Hints:

  • Don’t want the CSS file to save in the same directory? If you want to change the default folder that your generated CSS files are saved to, you can edit the configuration for what Sublime Text calls “Build Systems”. This configuration is what’s calling the commandline for SASS. Unfortunately there doesn’t appear to be a way to do this on a per-project basis, but you can change it.Example I used for WordPress: Having style.scss in the folder /sass/ inside your theme folder, this would save style.css in the root.
    "cmd": ["sass", "--update", "$file:${file_path}/../${file_base_name}.css"],
  • You probably don’t want your SASS partials to be compiled, if you’re using the SublimeOnSaveBuild. I’ve wrote another blog about adding a regex to stop this.

Package Links:

 

Comments on this Article

  1. Martin Dimmock says:

    So easy to follow, even though this is my first foray into SASS and Sublime Text. Thanks.

Leave a Reply

You can use the <pre> tag to post a block of code, or <code> to highlight code within text.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>