Designing with Compass – my new best friend with mobile applications

One of the more recent pair of shoulders to pop up is Compass. I would say that Compass is a natural development, stemming from Haml and Sass. It has made stylesheet a more natural part of Rails application development.

While a lot of tools exists for creating “html-generated applications”, stylesheets have always been left a bit in the cold. Sass helped a bit by adding variables and partials, but it still didn’t feel like programming.

Compass adds two important things:

mixins which enables you to create behaviors that you apply to several css classes.

functions which can be used to generate css values based on parameters

To show why this is great, here’s an example of doing grid layout the Right Way(tm) – and The-Way-You-Used-To-Do-It…

Grid layouts is usually coupled with frameworks like Blueprint, 960 and others. One of the problems with this is, that you do not get semantic markup in your HTML. Instead you get all kinds of layout classes. Here’s an simple example of a typical Blueprint HTML layout: