SASS Basics

SASS, Syntactically Awesome Style Sheets, can save you tons of time and stress.

Perhaps the main appeal of a CSS preprocessor like SASS is that it allows you to write CSS more concisely, with a lot less of the repetition that comes with “typical” CSS workflows. Preprocessors make CSS more like a programming language, allowing variables, functions, math, loops, includes, etc.

SASS partials allow us to “break up” our stylesheets into separate files and have SASS compile them. This is exceptionally useful for keeping your code modular and organized. It’s also very useful for teams working on the same site: different designers/developers can independently code different modules.

AListApart.com’s take on getting started with SASS is a good introduction to the topic.

SASS is typically used from the command line, although there are some applications to use it for the command-line-averse. One good free one, called Scout, is available for both Mac and Windows. A  full-featured app is CodeKit (Mac-only, however). Some development environments, like Netbeans, have ways to interact with the SASS binary.

However, the amount of command line comfort needed can be picked up very quickly, as you can do what you need to do with only a few commands.

Start by reading the Designer’s Guide to the OS X Command Prompt: a Tutorial for the Modern Web Designer and you’ll be fine.

Setting Up SASS on a Macintosh

SASS-LANG.com has lots of SASS info. The Installation process for Mac, Windows, and Linux is detailed there. If you are taking one of my courses, SASS will already be installed in the lab, so these instructions are for your own computer rather than for any in the lab.

The Mac installation is easily done, as Ruby comes preinstalled with OS X.

  1. Open Terminal from the Utilities folder.
  2. In your open terminal window type the following and press Return:
    gem install sass

    This will use a Ruby package manager to install SASS. If you get an error message, try the command again with sudo in front to run the command as the root user:

    sudo gem install sass

    Here you will be prompted for the admin password. Enter it and press Return.

  3. You should now have Sass installed. To check, type the following and press Return:
    sass -v

The Basics of SASS

As noted above, a concise and simple guide can be found at http://sass-lang.com/guide

SASS File Structure

An excellent explanation of how you can use SASS to break your production into nicely organized chunks, mainly through the use of partials that compile into a single main stylesheet can be found here:


Even if you only use partials, and no other SASS feature, it’s worth the time it takes to learn how to do it.

A common technique is to assemble a library of partials for things you use in all or most projects. Saving them as partials allows you to quickly compile them into a single CSS file with each newproject. Here I’m thinking about reset files like normalize, grid files, typographic scales, responsive code (like that needed for responsive YouTube videos), clearfix, etc.

Another very useful article discusses using SASS with WordPress and the Underscores starter theme:


Useful Sass Utilities & Info

sassme.arc90.com: this site lets you view the result of sass color functions like darken, lighten, saturate, adjust hue by pulling sliders. Much more intuitive than doing the math. This site might be down, but I’ve kept the link in case it comes back up.

A Visual Guide to SASS Color Functions: again, much easier than figuring this stuff out mathematically