Compass: CSS on steroids

What’s Compass? It’s the best thing since sliced bread. Seriously. Ok, what is it really? It’s a Sass extension. You haven’t head of Sass either? Oh my. Allow me to enlighten you.

Lets go through that again – Sass is a CSS pre-processor written in Ruby. What this means is you can declare variables in your stylesheet as well as other things like mixins, nesting and selector inheritance. Have a look over the examples for an idea of what these are. Essentially, it lets you write much smarter, concise CSS.

So Compass is really just a bunch of mixins for Sass, but incredibly useful mixins, especially if your using things like CSS3 that have a bunch of browser prefixes. For example Compass has a mixin for box-shadow so you can generate all the CSS needed for a subtle drop shadow using just one line:

@include box-shadow(#000, 0, 1px, 0);

Will generate the CSS:

-moz-box-shadow: 0 1px 0 black;
-webkit-box-shadow: 0 1px 0 black;
-o-box-shadow: 0 1px 0 black;
box-shadow: 0 1px 0 black;

Which leaves your stylesheet much cleaner and you don’t have to memorise all the different browser prefixes and varying syntaxes. It’s certainly saved me a lot visits to CSS3 Generator.

Compass also has the Blueprint grid system baked right in and ready to use. You can even tweak it to have a different number of columns or column widths. Blueprint comes with 24 columns by default, but I’ve never found myself using elements any smaller than a quarter of the page (6 columns). Instead you can set it to have 12 columns, which divides neatly into halves, thirds and quarters.

Still don’t understand what I’m ranting on about? This video explains succinctly how Compass and Sass work and why you should use them.

All my projects are built using Compass now and I even converted a few projects I was already working on. It was really easy to switch because Sass is built on top of CSS so all your existing stylesheets will work in Sass. You can just start inserting bits of Sass and Compass mixins wherever you need them. Removing presentational classes for the grid system was slightly trickier as I had to comb through the template files and replace them, but it’s been worth it for the cleaner and more semantic markup.

I’ve been using Compass for a couple of months now and I’m probably still just skimming the surface of what’s possible. Like trying to remember the time before the internet or mobile phones I can’t imagine using anything less than Compass to write CSS.

Two quick things about (CSS) Typography

I’ve just learnt about two things in CSS typography, something new and something old.

Firstly in CSS3 there is a new unit called rem which uses em units that are relative to the document root, rather than the element’s parent, which makes things a lot easier. If you use SASS there is also a mixin available to provide a px fallback for older browsers.

And secondly, line-height can be unitless. Who knew? Not me, obviously.