Drupal for Designers

Chapter 17. Making CSS Easier with LESS

LESS^[53] is a dynamic stylesheet language that allows you to code CSS more efficiently. Not only does it allow you to create variables with sensible names that you can reuse anywhere in your stylesheet, but it also allows you to nest CSS styles, which is a huge timesaver—especially when working in Drupal, when you might find yourself styling several different selectors within one page or block of the site.

In LESS, you’ll create your code in a file with the extension .less. Once you’ve created your code, you compile it into a .css file either using a JavaScript call in the browser (there’s even a Drupal module for it—see http://drupal.org/project/less), or using Less.app (available for the Mac at http://incident57.com/less) to compile it and upload the .css file to your server.

Creating Variables

Variables are little bits of code that you can call at will in your stylesheet. My favorite use for variables is in picking out colors. For example, let’s assume your site uses a specific shade of brown (#572700) in a variety of places throughout the layout. In regular CSS, you’d have to input each instance manually, and you’ll more than likely have the color written down—with a bunch of other colors used in your layout—on a pad somewhere near your desk.

Using LESS, you’d define the color once using @brown: #572700; and then call the color wherever it appears using color: @brown; or background-color: @brown;.

This allows you to not only code more quickly ...