Sass and Compass

I attended a presentation on using Sass and Compass at work recently. It’s amazing technology and makes coding in CSS quick and simple. I’ve been having a bit of a play and managed this site theme on the commute to work over a few days.

OK, so it’s not perfect, I’m no designer but it’s amazing how quickly you can get something working using these technologies. One of the real beautys of Sass is that the source files are so readable, so although created quickly it doesn’t feel hacked together, this means it’s easy to revisit the code and add to it later.

One of the most confusing aspects of these technologies is that they all call themselves frameworks!?

Sass is in itself almost a new language, based on CSS and Haml, it takes care of all the annoying aspects of CSS, readability, nesting rules, and most important of all variables.

You can now have variables in your CSS code, no more defining things throughout your style sheets and the headaches that result when these change. You simply define some constants at the top of the page for any reusable values. But thats not all, you can define functions as well! In Sass they are called ‘Mixins’, calling a Mixin returns a predefined chuck of code.

You create a Sass file and then compile it to CSS using ruby via the command prompt.

Well if you want to do things the hard way you do, this is where Compass comes in. Compass is another framework, that makes writing CSS even simpler, it comes with a lot of extra functionality onto of that already provided by Sass. As well as a lot of predefined CSS code to include in projects (such as a Sass version of the Blueprint CSS framework) it has ruby commands to make the process of working with Sass simpler.

I’ve been using Blueprint for some time, the ruby scripts that come with Blueprint are great but nothing compared to using Sass and Compass.