Haml Blueprint CSS mixin

I know there's a bunch of Haml users in the AtlRug, so I thought this might be interesting

John Schult and I had been looking at moving to the Blueprint grid CSS framework at work, however we had a couple issues with it. The biggest was the repetitive nature of adding span-x classes to all our divs. And there's also the dirty feeling that comes from placing styling markup inside your HTML. It's one thing to have a 'content' div and apply styling to it via CSS, but when you add class of 'span-14' you've broken the rule of keeping styling and content separate.

The solution we came up with was to use Sass and 'mixin' the css to our defined classes. You begin by importing the blueprint.sass into your main css file like so:

@import blueprint

Then instead of this in your Haml:

#post.span-14.prepend-2

we'd just shove it inside Sass as a mixin:

#post
    +span-14
    +prepend-2

Pros:

• Ridiculously easy to use
  
• Separates your page layout from the content
• Makes it possible to modify one SASS template and affect the layout for the whole site. You know, a big reason to use CSS in the first place
  

Cons:

• Might be DRY on your end, but it's repetitive to the browser(bigger CSS files since span-x is getting placed inside each element you use it on)
• Generates a blank blueprint.css file (this is just a side effect of having the code in sass, it's automatically gets compiled, and since it contains only definitions, it's empty)

Check out the source on John's github project 'Blueprint-grids-sass-mixin'. It's super easy to use if your already a Haml'r. We'd appreciate any feedback or ideas on how to make this better.

Tagged:
Haml Sass CSS Blueprint