LESS, CSS Frameworks, and Rails

02 Sep 2009
I have been a fan of the CSS frameworks for a while now. I started with YUI and now use Blueprint or 960.gs on a regular basis. What I never liked about the frameworks was the need to add all of the extra classes to the HTML markup. It seemed messy, wasn't semantic (not that I am a fanatic about that), and made it harder to reuse partials in my Rails projects.

CSS Improved

For a while now there has been SASS, which allows you to write CSS-like files that get translated into CSS. The advantage is that you can now use things like nested rules, variables, mixins, and more. The markup is similar to CSS so the learning curve is minimal. On top of that, there is Compass, which adds some of the popular CSS frameworks as mixins. Now it is easy to mixin the styles of the frameworks to your semantic classes in the CSS without adding all of the extra framework specific classes to your HTML markup. What I did not like about SASS and Compass was the dependency on HAML. I have tried to make the switch form ERB to HAML and I know that you can use SASS and Compass without using HAML in your templates. But it always seemed like an extra unneeded dependency in my apps.

Less CSS

I recently came across LESS, a Ruby gem similar to SASS. The idea is that you can write .less files that are CSS-like and they will be translated into CSS. The advantage, as I see it, is that you can use existing .css files as .less files since the syntax is so similar. In addition to the standard CSS syntax, you also get nested rules, variables, and mixins, just like SASS, but without the extra dependency. You can also import other CSS files as-is, like the CSS frameworks, and mix those styles into your semantic styles. This eliminates the need for Compass to provide the SASS-ified version of the framework. The gem itself is not specific to Rails and can be used on any project. You just need to run the LESS compiler to translate the .less file into a .css file. There is a Rails plugin that make it easy to start using LESS in your Rails projects.

LESS In Action

So what does it all look like? I will leave you with an example of how it all fits together.
@import 'blueprint/screen.css';

#content {
  .container;
  .clearfix;
  #main {
    .column;
    .span-18;
  }
  #sidebar {
    .column;
    .span-6;
    .last;
  }
}

#footer {
  .container;
  text-align: center; 
  font-size: .75em; 
  color: #666;
}
You can see more in my Basejumper, a starter Rails application.

blog comments powered by Disqus