LESS, The Flavor of CSS You Should be Writing for Drupal

It's no secret that we're obsessed with design. When we create a custom Drupal theme from our detailed designs, sometimes we end up with some pretty gnarly stylesheets. Since Drupal offers a generalized solution (typically a good thing), it creates unique, and often long, IDs and Classes for most HTML elements. When creating the theme, we are faced with a couple options:

1. Create boatloads of templates to maintain consistent class and ID naming conventions. This makes maintaining templates more complicated.
2. Create boatloads of CSS (often 2000 - 4000 lines) to bend the default markup to your will, our typical approach. This makes maintaining CSS more complicated.

Themes like Mothership are great for clean markup, but we wanted to improve the CSS side of things as well. We knew there had to be a way to write more concise and maintainable CSS while keeping templates maintainable in Drupal, which led us to the LESS CSS Preprocessor Module. LESS was originally created by the Ruby community and later ported to PHP by Leaf Corcoran. The LESS CSS Preprocessor Module for Drupal was added to the mix in March of 2010.

What is it?

LESS CSS Preprocessor Module is a compiler that generates css from a small superset language that adds many additional features seen in other languages. Once LESS is compiled, it's cached by the default CSS caching Drupal provides, so the performance hit is negligible.

What can it do?

LESS CSS lets you do some pretty interesting things, and I'll highlight my favorites.

1. Variables

The first thing that makes me stand up and shout is the ability to define variables in your CSS. Having variables is extremely helpful working in a team environment. Instead of having a bunch of weird hex codes that don't mean anything, you can define your colors as meaningful variables.
EXAMPLE:
At the top of your CSS document, you can define variables like this:

<br />
<pre>@branding-guide-green: #999900;</pre><br />

<br />
<pre>h1 {<br />
  color: @branding-guide-green;<br />
}</pre><br />

2. Function like capability

Commonly we use the CSS property border-radius to round corners of html elemnts. Currently border-radius takes three lines of code to make it as cross browser compatible as possible (surprise, IE doesn't support border-radius)? With LESS CSS, we can do this with one line of code.
EXAMPLE:
Define your function at the top of the document. In this example our default radius is 5px.

<br />
<pre>@border-radius(@radius:5px) {<br />
  -webkit-border-radius: @radius;<br />
  -moz-border-radius: @radius;<br />
  border-radius: @radius;<br />
}</pre><br />

<br />
<pre>#some-id {<br />
  -webkit-border-radius: 5px;<br />
  -moz-border-radius: 5px;<br />
  border-radius: 5px;<br />
}</pre><br />

<br />
<pre>#some-id {<br />
  @border-radius;<br />
/* This will pull in all three lines of CSS with the default 5px radius */<br />
}</pre><br />

<br />
<pre>#some-id {<br />
  @border-radius(10px);<br />
/* If you want to use a different border-radius,<br />
pass it whatever pixel value you wish  */<br />
}</pre><br />

3. Nesting

Typically in CSS you have to repeat yourself a lot. LESS can help you prevent this by allowing you to nest elements. You can definitely get carried away with nesting and make your CSS more difficult to read, so you'll need to find a happy medium.
EXAMPLE:
Standard CSS

<br />
<pre>#some-element {<br />
  background-color: #000;<br />
}<br />
#some-element li {<br />
  padding: 5px;<br />
}<br />
#some-element li a{<br />
  color: #000;<br />
}<br />
#some-elemnt li a:hover {<br />
  color: #CCC;<br />
  text-decoration: none;<br />
}</pre><br />

<br />
<pre>#some-elment {<br />
  background-color: #000;<br />
  li {<br />
    padding: 5px;<br />
    a{<br />
      color: #000;<br />
     :hover {<br />
          color: #CCC;<br />
          text-decoration: none;<br />
      }<br />
    }<br />
  }<br />
}</pre><br />