Installing Sass and Compass on Mac or Windows

14 Sep 2013

Quick post. I'm going to assume you've heard of Sass and Compass before and I'm not going to cover any of that. If you haven't heard about them or their preprocessor cousins I hope you get good broadband under your rock cos you need to do some serious google catch up.

If you want to Sass and Compass without a tool like Codekit or Prepros (I did to use Grunt) then you might have to go and install Sass and Compass manually. Don't worry. Its super easy.

Don’t fear the command line

First thing’s first, we need to do this via the command line (CMD in Windows, Terminal on Mac). I used to fear not having a GUI. Then someone pointed out to me “The Command Line is the GUI”. Once you get used to it and get over the inital fear of wiping out your hard drive or sending your browsing history to the NSA (lolz) its really awesome. I recommend reading these posts if you wanna bit of a primer or a walk through some basics:

Installing Compass

OK so if you want Compass you need Sass, and if you need Sass you need Ruby. If you’re on a Mac, you already have it[^1]. If you’re on Windows - too bad… Just kidding. Installing Ruby on a Windows is easy. Go get rails Installer and download the appropriate package for your OS. install it (it installs a bunch of useful stuff, including Ruby, Ruby-on-Rails and Git). Go do that and I’ll wait here…

Done? Cool. So now we want to make sure Ruby Gems is up to date. Ruby Gems is like NPM but for Ruby (maybe NPM is like Gems for Node, I dunno). If you don’t know what I’m talking about, go read the previous article.

So jump over to your command line

1

$ gem update --system

That’ll get everything up to date before we install Compass. Now enter

1

$ gem install compass

Done. Thats Sass and Compass (and Ruby) installed and this is only the 5th(ish) paragraph.