Implementing LESS in Drupal 7 with Omega theme

Well with so much reading on CSS, LESS and DRY I guess this article was on the cards, isn't it. My last two micro blogs on DRY and LESS, it was time to implement them on a Drupal installation and try out with Omega theme. And a little bit of Google and finally it worked.

In this tutorial I will show you how to implement the power of LESS in Drupal using Omega theme. You can check out the these links if you want to know more about LESS and DRY because I am not going to talk about these things in this tutorial.

So, how to use .less files in a Drupal theme?

This is the module that we need to install {LESS}. This module has a dependency for Libraries API module which you can get from this link.

Once done, things are not complete, you need to add the php library for LESS which you can download from here: http://leafo.net/lessphp/

Once that is done, it's time to add the .less file in the info file of our theme.

Omega subtheme info file

This is very important because if you don't do this and instead use the code given in the install file, your CSS file will come before the Omega theme CSS files and so the styles in the LESS files will not effect. Believe me this one took me a lot of time to get. But thanks to this link I finally managed to get this.

Once this is done; cache cleared; you can go to the theme settings page and see that the LESS file is now available to be included. Here is the screenshot:

Settings page for the Omega Subtheme Styles

And when you have this thing in place, you are ready to go...