Design and Prototyping for Drupal

Chapter 15. Working with LessCSS

LessCSS (http://lesscss.org/) 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 re-use anywhere in your stylesheet, it also allows you to nest CSS styles, which is a huge timesaver—especially working in Drupal, when you might find yourself styling several different selectors within one page or block of the site.

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

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 that 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 LessCSS, you’d define the color once using @brown: #572700; and then call the color wherever it appears using color: @brown; or background-color: ...