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:
Then in your Sass file, say you write this:
Now compile the Sass (more on this later), and the output is a CSS file that looks like this:
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!