Thumbnail Image

Date Posted: Apr 26 2017

Tags: Tools, SASS, SCSS, CSS, Sublime Text, Sublime Packages

Building SASS And SCSS In Sublime Text

During the last couple of months, I have been delving into the world of SASS/SCSS, and as a result SASS/SCSS has become a frequently used tool in my personal projects; and has also featured in the tutorials I have been sharing here on Codesmite.

However, I have one major pet peeve with SASS/SCSS. I like to use as few programs as possible to streamline my workflow and I am a huge fan of Sublime Text. I use it for almost everything programming related. Unfortunately, by default, Sublime Text is incompatible with SASS/SCSS syntax.

In this article I will show you how to quickly and easily configure Sublime Text for syntax highlighting SASS/SCSS, and also how to compile SASS/SCSS files into raw CSS from within Sublime Text.

SYNTAX HIGHLIGHTING

Having easy to read code that can be quickly skimmed through can greatly improve workflow, especially when hunting for that elusive semi-colon that is causing compiling errors.

The example below, showing SASS in Sublime Text with the default CSS syntax highlighting is visually quite undesirable:

Image example of bad syntax colouring

Fortunately, there is a very useful package available for Sublime Text that adds support for SASS/SCSS syntax highlighting and tab code completion.

You can find the Github repository here: https://github.com/nathos/SASS-textmate-bundle
Alternatively, an even simpler way to install the package is to use the built-in Sublime Package Control.

INSTALLING WITH SUBLIME PACKAGE CONTROL

  • From inside Sublime Text press: CTRL + SHIFT + P (Command + SHIFT + P for Mac users), this will open the Sublime Command Palette.
  • Type Package Control into the input box to narrow the selection, then select Package Control: Install Package from the list.
  • Image example of Sublime Command Palette
  • Sublime will take a moment to retrieve the list of available packages.
  • When the list of available packages appears, type SASS into the input box to narrow the selection and then select SASS – SASS Support for TextMate & Sublime Text (2 & 3).
    The package will now install automatically. Image example of sublime package control

SELECTING SASS/SCSS SYNTAX HIGHLIGHTING

An option for SASS is now selectable from the syntax menu, this can be found by clicking the currently selected syntax located at the bottom right of the Sublime UI.

Image example of syntax selector Image example of syntax selector menu

The syntax highlighting on SASS/SCSS files is a lot more desirable and easier to read now that Sublime Text understands the syntax: Image example of good syntax colouring

OVERRIDE HAML DEFAULTS

When opening a file with SASS or SCSS extension Sublime Text defaults the file extension to Ruby HAML syntax highlighting. This default behaviour can be easily overridden by opening the syntax menu and selecting the SASS option in the drop down from the Open all with current extension as… option found at the top of the list.

Image example of ship control hover

THE THEME I USE

If you like the colours of the theme used in the examples, you can find it within Sublime Package Control by searching for Predawn Monokai. It is a modification of Flatland Monokai theme with the dark UI elements of Predawn.

BUILDING SASS/SCSS IN SUBLIME TEXT

Sublime Text now recognises SASS/SCSS syntax, it would be even better if it could also perform build operations on SASS/SCSS code directly from Sublime Text without having to open another program or Console Window.

There is a package for Sublime Text that does exactly that.
Which can be found on Github here:
https://github.com/jaumefontal/SASS-Build-SublimeText2

Package Prerequisites:

Windows users will first need to install Ruby.
The installation can be located here: http://rubyinstaller.org/downloads/

OSX and Linux Operating systems include Ruby by default and require no further installation.

INSTALLING WITH SUBLIME PACKAGE CONTROL

  • From inside Sublime Text press: CTRL + SHIFT + P (Command + SHIFT + P for Mac users), this will open the Sublime Command Palette.
  • Type Package Control into the input box to narrow the selection, then select Package Control: Install Package from the list.
  • Image example of Sublime Command Palette
  • Sublime will take a moment to retrieve the list of available packages.
  • When the list of available packages appears, type SASS Build into the input box to narrow the selection and then select SASS Build.
    The package will now install automatically.
Image example of Sublime Package Control

Once the package is installed there will be two new options: SASS and SASS – Compressed in the build systems, located at Tools > Build Systems from the navigation bar.

Image example of ship control hover

The SASS build option will output a compiled CSS file that preserves the layout and whitespace of your SASS/SCSS file.

Alternatively, the SASS – Compressed build option will output a minified CSS file that removes: comments, whitespace and the semi-colon of the last rule in each block, as none of these are required to be valid CSS.

To start the build select Build from the Tools menu or press CTRL + B (Command + B for Mac Users) while a SASS/SCSS file is open.

Once the build is complete a compiled CSS file and a CSS Map file will be created in the same folder as the source SASS/SCSS file, as shown below:

Image example of ship control hover

Summary

Using only two easy to install packages, we are now able to write SASS/SCSS code in Sublime Text with readable, highlighted syntax; and can also run a custom build that will turn SASS/SCSS code into compiled CSS. There are many packages available for Sublime Text that can improve functionality and workflow, making Sublime Text an even more powerful tool for programmers.

Have a favourite Sublime Text Package that improves your workflow? Let us know in the comments below; we would love to check it out.

Author Avatar

BY CODIN

Owner of Codesmite.com

Codin is a self taught web developer based in London, UK.
Over the years he has dedicated a lot of time to helping new developers, becoming a well known moderator at Team Treehouse