Using Less with Omega

Sun, 05/06/2012 - 00:21 -- webmaster

So I'm working on a website and I finally got time to look into using Less. Its a cool tool that allows you to write CSS like a computer language instead of just a bunch of weirdly disconnected styling statements. It looks like it could increase productivity and make editing significantly easier. And of course there's a Drupal module to make it easy.

Being a Drush user, I figured it would be easy. Almost, but not quite. According to the documentation you have to download the Less library and put it in the standard Drupal sites/all/libraries folder. So far so good. A quick command of "drush dl less" works great. But when it came time to "drush en less" - FAIL!

Apparently drush had no problem figuring out that it needed to download and install the libraries module, but for some reason it couldn't locate the less library so the entire thing failed. So I backed up and did a "drush dl libraries" and a "drush en libraries", the retried "drush en less" and it worked.

Unfortunately, the next part is where the documentation gets really sketchy. Somehow you're supposed to have the theme point to a ".less" file, but the directions are specific to the standard Drupal way, and most of the discussions about it refer to explicitly loading the file from PHP code. But Omega uses a slightly different info file format. Thankfully, after over an hour of searching about, I ran into this Stack Exchange Q&A that showed an example.

css[global.css.less][name] = My Project styles
css[global.css.less][description] = LESS CSS stylesheet for My Project.
css[global.css.less][options][weight] = 10
settings[alpha_css][global.css.less] = 'global.css.less'

So once the module is properly installed, there's three steps to getting it to work.

  1. Change the name of the css/global.css file to css/global.css.less
  2. Edit the .info file and replace all occurrences of 'global.css' with 'global.css.less'
  3. In the Appearance admin under the Toggle styles tab, you need to enable the new checkbox corresponding to the global.css.less file

That last step is something I never would have considered. I'm glad the Stack Exchange page mentioned it.

Also worth noting is that there is a permission associated with administering the Less module, so you'll want to make sure that's set up. And the admin page for Less allows you to regenerate/recompile with a click, or to have it regenerate every time a page loads - which is great for development.

Now that I know how this works, I'll probably be using it on all the new sites I work on.

Content Category: