Teaching Myself SASS

Several times over the past few weeks, developer friends have asked me how I got started with SASS. I've emailed a variation of the text below enough times that I wanted to share it here.

Below is a tour of SASS, Compass, and Singularity, the primary tools that I use to built out responsive themes. My goal is to walk you through the steps that I took to learn these technologies so that you can get up to speed on them.

Sass logo

First, the base language that you need to learn is SASS. SASS is the foundation upon which everything is built. A great place to start is http://sass-lang.com/guide. Additionally there great free video tutorials at http://www.youtube.com/watch?v=fbVD32w1oTo&list=PL2CB1F80266E986EA. These two stops will be the biggest investment of your time at first. One note: even though we call it SASS, you'll actually want to learn SCSS. SASS is the older syntax.

After you feel comfortable with SASS, Compass is the next stop. Compass is a framework of common components that the community has built up on top of the SASS language. As you work through the SASS tutorials, you'll probably have a moment (especially in the Functions and Mixins sections), where you'll say to yourself "oh, cool, I'll be able to write this function one time and then when I want to do [insert often repeated CSS thing here], it will be easy." And then you'll look at Compass and realize that someone else has already done it. You can learn more about Compass here: http://compass-style.org/

SASS and Compass are really the baseline, and everything is built off of those. There are a lot of great plugins at Team SASSon github: https://github.com/team-sass. One of the best ones is Singularity (https://github.com/Team-Sass/Singularity). Singularity is the system I use to control responsive grids. I also separate out my layout partials from my style partials.

Anyway, there is a great video of Singularity here: http://vimeo.com/63509346. Once you have a handle on SASS andCompass, (ie once you are compiling CSS locally with those tools), then give Singularity a spin.