How to use LESS (CSS) in a Zen sub-theme?

Question

I'm trying to use LESS in a Zen sub-theme, but while the CSS files are correctly included (even with a ".less" extension), the LESS rules themselves don't seem to be recognized and processed.

Here's my setup :

• Zen theme installed, and sub-theme created (and activated)
• LESS module installed and enabled (along with Libraries)
• the lessphp library has also been installed, following the instructions on the LESS module page.

In my sub-theme folder, I basically have the following files :

• mytheme.info, which includes the css/styles.css below.
• css/styles.css: (provided with the Zen Starter Kit) only contains a bunch of import rules; among them I added @import "mytheme.less"; which will be the main CSS (LESS) file for my theme.
• css/mytheme.less, in the same folder as the styles.css. I used this file to test simple LESS rules.

When I use a normal CSS rule in the mytheme file, it's recognized and displayed normally in the site (e.g. body {color: red;}. However, even basic LESS rules seem to be simply ignored. Example of code that doesn't work:

@color: red;
body {
    color: @color;
}

I'm not familiar with CSS preprocessors, so I don't know if I'm missing anything. Or is the Zen theme somehow incompatible with the LESS module?

So, any help is appreciated. Thanks in advance.

Answer 1

I can't comment directly about using LESS with Zen, but I have used it with Omega 3.

With this, you have to specify the proper filenames in the theme.info file. The stylesheets need to be named like "styles.css.less", and specified like:

stylesheets[all][] = styles.css.less

in the .info file. Includes with variables and mixins get named like "mixins.less".

Assuming files are named this way, the module will do its thing, and compile the sheets and rewrite the paths to reflect the compiled versions.

That said, we stopped using LESS a while ago, and have moved on to Sass/Compass.

Answer 2

Zen Grids depend on SASS. Zen Grids were not written for LESS. You can use the Zen theme without the grids component, but that would be more trouble that it's worth.

While developing with a CSS preprocessor locally, you will need to install sass and compass. You will then need a tool to watch your directory of sass files for any changes then compile the SASS into css in the css directory. Usually you would navigate to your theme directory in the command line tool of your choice and enter "compass watch". This will then automatically compile your sass as you save.

For more info see Getting started with Drupal7, Zen, Sass and Compass.