Installing Sass and Compass

Posted on: January 23rd, 2013

Installing Sass and Compass for preprocessing power doesn’t need to be complicated. This post will not be about “which is better” in the Sass vs. Less realm. For that, go here.

This post is only about installing Sass and Compass on a PC. Everyone told me it was hard and to just use an app like a Codekit for Windows type of app, but why do that when installing Sass and Compass directly is so easy?

Installing Ruby

To install Ruby (necessary if you would like to install Sass and Compass) go to rubyinstaller.org and click the big “Download” button. Once you’ve downloaded the application, run it and follow the install wizard. The important part to remember is checking the box “Add Ruby executables to your PATH.” I didn’t find that out until after I installed and found this Impressive Webs article. Important note: you should probably restart your computer at this point. Once restarted, open up your command prompt.


Installing Sass

In your command prompt, type:

gem install sass 

Now wait and watch as some things get installed. If installed correctly you should see a line that says “1 gem installed” along with the Sass version and some documentation installations. For checking the version of Sass you have running, type:

sass -v

The above code as well as how to update your version of Sass can be found at Liam Jay Designs. Sass is now installed and if you were following another tutorial you’d set up a project and watch and all that, but we’re going to skip that for now and install Compass.

What’s Compass?

Compass is basically an extension of Sass that adds flexibility and modules that an app like Codekit would give you, including compiling. With Compass you can @import built-in modules that make writing your Sass even easier. If you don’t believe me, take a look at what you can use if, in your main style.scss file, you @import “compass/typography”. A vertical rhythm helper is pretty cool to me, but enough gawking, let’s install this bad boy.

Installing Compass

Head back to your command prompt and type:

gem install compass

Congratulations, you now have the same setup as me. Compass has some great documentation on your next steps after Compass is installed and you can take off here, or you can stick with me and see what I do next.

Bones Starter Theme SCSS

Sass and the Bones Theme

I like WordPress, so I wanted to use Sass and Compass on a WordPress project. After looking around for starter themes I settled on using Bones, a mobile-first, responsive HTML5 starter theme. One other reason for choosing this theme was that it already had Sass files ready for use and as a newbie, it really helped understand the layout and syntax when using Sass in a project. Once installed (locally of course) I started editing and tweaking.

Using Compass to Watch and Compile

Watching the files for changes and compiling is extremely easy. In your command prompt, cd your way up to the folder that contains your config.rb file. In the case of bones it was:

cd bones-starter/library/scss
compass watch

You’ll get a message that “Compass is polling for changes. Press Ctrl-C to Stop.” Test it out and tweak the _base.scss file. Save and check the command prompt. You should see the following, “Change detected at TIMESTAMP to: _base.scss, overwrite ../css/style.css” Your style sheet is now updated and you have successfully installed everything.

Config.rb makes all the Compass magic happen, so be sure to check out the documentation on it if you want to know more. I’ll most likely be writing about it in the future.

Now get out there and start using Sass and Compass like a pro.

previous post: Custom Excerpt Lengths in WordPress next post: PHP not recognized as an internal or external command