Getting Started with SASS

Preprocessors seem to be all the talk for front-end web developers and it’s no different with me. In the last two years I’ve played with both LESS and SASS and the past year, have worked almost exclusively with SASS. This post is going to be all about getting started with SASS. You can read a very detailed post about LESS vs SASS over on CSS Tricks if you want to know about both.

If you aren’t familiar with SASS, you can get the skinny over at http://sass-lang.com. If you want the shortened version though, here goes. SASS is an extension of CSS3. It allows you to add things like nested rules, variables, misins, selector inheritance, and more. SASS output well-formatted, standard CSS using the command-line tool or a web-framework plugin. SASS has two syntaxes. The most commonly used syntax is “SCSS” which stands for “Sassy CSS” and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss (somewhat rehashed of sass-lang.com).

Installing SASS

Installing SASS is easy. It does require that you have ruby though. Thankfully I’m on a mac, so there’s nothing I need to do as a “first” step. If you are on a Windows computer, you can get Ruby installed by running the Ruby Installer.

After you have Ruby installed, just open up terminal, and type:

sudo gem install sass

And that’s it. I like to use Compass when I use SASS, so I’ll install that the same way.

sudo gem install compass

The last thing I thought about was I really like well thought out Mac apps. Codekit is one of those apps that I just needed to have. I can add my new sass and compass project to Codekit and it takes care of updating and reloading my browser. I’m then able to code away, save and repeat. 🙂