55 Minutes

Welcome to the 55 Minutes blog.
55 Minutes is a web development consultancy in San Francisco building apps for design-led businesses and startups. On this blog we discuss the technology tools of our trade: Ruby on Rails, Django, Sass, OS X, and more.

Compass Will Change Your Life

In which I aggressively push the adoption of Sass and Compass by every web developer.

If you write markup, and you’re not already using Sass and Compass to write your styles, I’m not sure what you’re waiting for.

If you haven’t heard of either, here’s a crash course. Sass (short for—love this—Syntactically Awesome Stylesheets) is an extension on CSS3 that introduces features like variable substitution (!), arithmetic operations and functions (!!), nested rules, mixins, and selector inheritance, among other things. Here’s an example of what you can do. Say you start with the following:

<style type="text/css">
  .clearfix:after
  {
    /*clearfix styles here*/
  }

  #sidebar,
  #content
  {
    float: left
  }
</style>

<div id="page" class="clearfix">
  <div id="sidebar">
    blah
  </div> <!-- /#sidebar -->
  <div id="content">
    blah blah
  </div> <!-- /#content -->
</div> <!-- /#page -->
compass-01.html – View Gist

Then in your Sass file, say you write this:

$poppy-red     : #ac3e2b;

$page-width    : 800px;
$content-width : 500px;
$gutter-width  : 30px;
$sidebar-width : $page-width - $content-width - $gutter-width;

#page
{
  width: $page-width;
}

#sidebar, #content
{
  float: left;
}

#content
{
  width: $content-width;
}

#sidebar
{
  margin-right: $gutter-width;
  width: $sidebar-width;
}

.error-feedback
{
  color: $poppy-red;
}
compass-02.scss – View Gist

Now compile the Sass (more on this later), and the output is a CSS file that looks like this:

#page
{
  width: 800px;
}

#sidebar, #content
{
  float: left;
}

#content
{
  width: 500px;
}

#sidebar
{
  margin-right: 30px;
  width: 270px;
}

.error-feedback
{
  color: #ac3e2b;
}
compass-03.css – View Gist

This is awesome – you’ve just written code that you will be able to understand 6 months from now (“Where the heck did 270px come from?”), even if your stylesheets have thousands of lines of code in them, and the browser gets exactly what it expects. Seriously awesome.

So what’s Compass? Well, Sass comes bundled with a compiler, but using it involves some syntactic tedium. Compass is a tool—a framework, really—that not only makes the setup and use of Sass-powered projects easier, but also includes a library of mixins like CSS3 features and the blueprint 960 grid framework. Boom! Writing CSS has just become fun again.

Unfortunately, however, the documentation on the Compass site is not the easiest to understand unless you’re already familiar with Sass (I wasn’t when I started), so getting going can be a bit slow. But never fear. We’ve put together a handy-dandy Compass-based CSS3/HTML5 scaffolding that you can check out and noodle around with—learning by doing is IMO the best way to develop a natural understanding here.

Before you get started, you’ll need to have Ruby, Rubygems and Compass installed, as well as a few supporting gems (see the Github read me for details). Once that’s done and you’ve downloaded the code, simply change into the styles directory in your terminal application of choice and type compass watch1. Now as soon as you make a change in your Sass source files, Compass will automatically recompile the final CSS. Try it out!

Notes

  1. Note that this method is completely agnostic of any web application framework you may be using. For a more powerful solution specifically tuned to Ruby on Rails, consider plugging Compass directly into the Rails asset pipeline.

comments powered by Disqus