My Experience with Compass

So, as you may have noticed, I have given the site a bit of a make over... and I thought it may be nice to make my first post be about the tools that I used to create the new look. In particular I want to talk about the wonderful Compass CSS framework.

Compass

Compass is what I would call a "real" CSS framework. Tools like Blueprint and 960 Grid have been classed as frameworks but really, they are just grid systems. If we think of other types of frameworks like .NET, Cake, Rails, they all provide an abstraction of the given language in order to save us from having to re-implement common functionality. With the help of Sass, this is exactly what Compass does.

Sass

It's worth saying a few word about Sass. Sass is an intermediate language which allows you to do a lot more than you can with standard CSS, the best of which are:-

  • You can define variables
  • You can define reusable blocks of code called mixins

In addition to this the syntax is much more concise. With these great features Sass looks like it might outshine it's sister project haml.

Back to my experience with Compass

I used Compass along with Rails to create this site and it really has been the most pleasurable experience I've had when styling a site.

When dealing with styling on past sites, I frequently ended up with one CSS file which included all the styling for the entire site. This is not a good way to approach styling for a few reasons. First of all, it makes it harder to create reusable pieces of code. Second, having all the code packed into one file results in unreadable unstructured code.

Compass and Sass changes all of this and more! Compass provides some common functionality via mixins plus I can create reusable blocks of code using Sass. Further to this, Compass includes wrappers for grid sytems, such as Blueprint, so you can leverage off them. It doesn't end here - Compass Sass allows you to define "partials" similar to that of Rails. These are great for separating your code to make things more modular... and if you're thinking that these extra files will result in more http requests to the server, you'd be wrong. As I said, Sass is an intermediate language meaning it ultimately needs to be compiled into CSS - so you can potentially end up with one CSS file and you can even compile it in compressed mode!

I can't recommend this approach enough. So, for you next project, give it a go.

Installing Sass

http://sass-lang.com/download.html

Installing Compass

http://wiki.github.com/chriseppstein/compass/getting-started