Design and Prototyping for Drupal

Compiling the Code

In order for LessCSS to work on your site, it needs to be compiled into regular CSS. If you’re on MacOSX, you can download Less.app, a free application that will compile your .less files into CSS every time you save the file (http://incident57.com/less). Simply keep the app (see Figure 15-1) open while you work, drag your theme’s folder into it, and every time you save the file, it will compile your work into a .css file in the theme folder.

Figure 15-1. The handy Less.app “watches” any folder that you drag into it and compiles your LessCSS into CSS as you work

If you aren’t on Mac (or you’re working in OSX 10.5 or earlier—Less.app only works in 10.6 and above), there are other options for compiling your .less files:

The LessCSS Preprocessor module

This module claims to process any .less file that you add to your theme’s .info file (http://drupal.org/project/less). I’ve never used it before, so I can’t vouch for how well it works; if you do have the ability to use Less.app, I’d use that before installing the module.

The Less.js JavaScript

This JavaScript file (downloadable from http://lesscss.org/ will process your .less files directly on the server if you include it in your theme’s .info file.

Although both of these are perfectly fine options, I prefer using Less.app for one major reason: I hate worrying about my JavaScript not running. In an average Drupal installation, ...