0

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.

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.

  • Thanks for your answer. I did a bit more of testing, and I got it to work if the .less file is called directly from the .info file. It doesn't seem to work if the .less files are included via a .css file (which itself is included via the .info file) (which was my initial setup), and it doesn't seem to work either for .less files included via .less files, themselves included via the .info file (i.e. if I rename the styles.css in styles.css.less in my example case). In any case, using a .less file extension seems enough; no need for .css.less. – s427 Apr 14 '14 at 12:52
  • @s427 You can definitely include .less files from other .less files. I have used this extensively in my LESS enabled themes. – mpdonadio Apr 14 '14 at 13:41
  • Oh you're right. Not sure what I was doing wrong before, but it's working now. – s427 Apr 14 '14 at 14:13
0

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.

  • Thanks for the link. I'm aware that you can use SASS with Zen, however it's optional and it's also entirely possible to just use regular style sheets (plain CSS files). Given that, I'm trying to figure why the LESS module doesn't seem to work with the Zen CSS files, since it's supposed to just kick in whenever it detects CSS files with the "less" extension. I'll try to play with the files names a bit more to see if that's the problem. – s427 Apr 14 '14 at 8:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.