Trying out Compass, a CSS Framework

A week or so ago I decided to finally sit down and try out the Compass CSS framework. When I first looked at it, I was dismayed to find that it required Yet Another Language to learn, but then I quickly saw its advantages when I started using it.

The Compass CSS framework aims to be a real framework that does some heavy-lifting to let a web designer focus on CSS. It compiles a language called SASS into CSS and uses modules to allow integration with other “plain” grid-based CSS frameworks such as YUI GridsBlueprint, and 960 Grid System.

The SASS language is indentation-based and is similar to YAML. When Compass is run, it generates CSS files from the SASS files. This lets SASS provide all sorts of nifty things, such as inheritence, mixins, functions and variables. Inheritence and mixins are important because you can define a general border style, such as a left border that is solid thin and black, and then apply it to whatever CSS selectors you like. Then when you make a change to the border style, you only have to make the change once instead of finding/replacing the styles in all the selectors.

When trying to learn Compass, I decided to convert an old stylesheet to SASS. I wrote less than 100 lines of SASS to generate over 400 lines of CSS. On top of that, I used variables for different colours and added/subtracted to those colour values to generate new colours. Instead of finding/replacing and manually calculated, SASS took care of both of those things.

SASS functions let you calculate things based on the input that you give it. Just like functions in any other programming language. SASS mixins let you combine various styles under a CSS selector.

An example of the SASS syntax:

// example of a variable
!titleColor = #a3a

//example of a mixin/function
=minSize(!a)
  :font-size = (!a + 10) "px"

// inherited css selectors
a
  color: blue
  &:hover
    :color black
  &:visited
    :color purple

// more inheritence
body
  #header
    // color variable
    :background-color = !titleColor
    #blog-title
      // mixin/function call
      +minSize(22)
    #description
      +minSize(8)
      :font-family sans-serif
  #content
    +minSize(9)
    :background-color = !titleColor + #505
    #blog-post
      :font-family serif

And here is the CSS output that was generated by SASS:

a {
  color: blue; }
  a:hover {
    color: black; }
  a:visited {
    color: purple; }

body #header {
  background-color: #aa33aa; }
  body #header #blog-title {
    font-size: 32 px; }
  body #header #description {
    font-size: 18 px;
    font-family: sans-serif; }
body #content {
  font-size: 19 px;
  background-color: #ff33ff; }
  body #content #blog-post {
    font-family: serif; }

You can see how the selectors are nested and inherited. You can also see how the font-size of the various elements that used the minSize function were generated. The best part is the addition of two colours to create the colour for the body #content.

Basically, to summarize why you would want to use Compass:

  • SASS lets you use variables and functions to generate CSS
  • SASS lets you mix styles with different CSS selectors
  • Compass has plugins and modules to support the grid-base frameworks like Blueprint

This was a short post, mainly because as a programmer, the idea of variables/functions and a proper language for generating CSS is instantly appealing. So I’m hoping to create a module/plugin or plain template of my own for the MovableType blogging software and I’m attempting to convert templates and themes to use Compass to learn more about Compass and to improve my not-so-great web design skills.