Use Compass In Your Sass Projects

If you have started to dive into the wonderful world of CSS preprocessors (LESS or Sass), you might have also heard of Compass. If you haven’t decided on either LESS or Sass, I would make the investment and learn one, or both, of the technologies. It’s well worth the time and will make your coding and development life a lot easier.

Today, we’re going to look at Compass, an open-source CSS authoring framework built on Sass. Similar to Sass, it is installed via the command line (Terminal in Mac OS X) and is run off of Ruby.

Installing Compass

Compass runs on Ruby. If you’re using Mac OS X, you already have Ruby installed. If you are on a Windows machine, you can install it using the Windows Installer. I’ll proceed with this tutorial as if you’re running Mac OS X.

First, fire up Terminal. If this little black box scares you, don’t worry. I was always very intimidated by working in the Terminal, but after following some tutorials, working with Ruby and Git, you get to be more comfortable.

[WARNING: Working in the Terminal gives you access to seriously mess up your computer. Be cautious about command lines you run in the Terminal.]

The first command you’ll want to type into the command line is to check and see what version of Ruby you’re running. To check, run this command

ruby -v

Once you click enter, the Terminal should tell you which version of Ruby you are running. If you see something like this, you’re ready to install Compass and start working with it.

Now that we know we have Ruby running, we can install Compass. To install Compass, jump back into the Terminal and run this command:

sudo gem compass install

This will install Compass and you’re all set. Next, we’ll create a Compass project.

Creating a Compass Project

The creation of a Compass project is fairly unique. Again, we use the command line to set it up, but the commands can be a little different depending on what you want to call your project. Head on over to compass-style.org/install and run through their project creation ‘wizard’. It will help you set up either a new or existing Compass project, as well as naming the project, determining whether or not to set it up with Blueprint’s or Compass’s default stylesheets, and more.

For example, the project that I’m creating uses this command:

compass create developerdrive

This creates a new folder called developerdrive in the directory where I run the command line. [Hint, use the command line’s “ls” and “cd” commands to list the files and change directories to make sure you install your files in the place you want them.]

So now that you’ve got those files installed, let’s look at how we can use some of Compass’s features.

Using Compass

So Compass, which as we’ve mentioned is a form of Sass, uses a set of mixins and functions that can help you powerfully and quickly create websites, web apps, and more.

To get started, visit Compass’s website and check out the References section. This will give you an extremely detailed look into all that Compass can provide.

Let’s first look at a CSS reset, which many people include in every one of their projects. Many of the resets are very robust, and usually you have to head over to Eric Meyer’s website to get the reset. But if you’re running a Compass project, including a CSS reset is as simple as

@import "compass/reset";

in your Sass file. That one line in .scss will compile (via CodeKit or the command line) to output

@mixin global-reset {
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed,
  figure, figcaption, footer, header, hgroup,
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
    @include reset-box-model;
    @include reset-font; }
  // Unlike Eric's original reset, we reset the html element to be compatible
  // with the vertical rhythm mixins.
  html {
    @include reset-body; }
  ol, ul {
    @include reset-list-style; }
  table {
    @include reset-table; }
  caption, th, td {
    @include reset-table-cell; }
  q, blockquote {
    @include reset-quotation; }
  a img {
    @include reset-image-anchor-border; }
  @include reset-html5; }

Pretty impressive, eh? That is just one line of code, that outputs all of that reset. Now imagine how clean that keeps your styles!?

Compass has a lot of mixins including Resets, Layout, CSS3, Typography, Utilities, and Helpers.

In my next article, we’ll walk through setting up an entire website using Compass with Sass and basic HTML. You’ll be amazed at how easy it is. In the meantime, play around with the technology and let us know if you have any questions in the comments!