How to add {less} files to Omega HTML5 subtheme?

Question

I would like to use less.js and the less module to work with my Omega-based HTML5 themes. How to add *.css.less files to the Omega-based subtheme .info file ?

My current set up is:

1. /sites/all/themes/omega - the Omega master theme directory
2. /sites/all/themes/custom-html5 - Omega-based HTML5 subtheme directory
3. /sites/all/themes/custom-html5/css/custom-html5-alpha-default.css - my default css file

This question is related to

my previous one: How to use CSS preprocessor LESS.js with Drupal 7?

Answer 1

Install the LESS module and then in your custom-html5.info file just add your LESS CSS files like you would normally add stylesheets:-

stylesheets[all][] = css/custom-html5-alpha-default.less

The module will detect the LESS files (those with a .less file extension) and process them so that they are output as standard CSS.

Processing the LESS files on the server rather than via the browser using JavaScript will give the end user a better experience and ensures that the look of your site isn't dependent on JavaScript. If you really must include the less.js file then perhaps you could consider using the drupal_add_js() method in your template.php file.

Answer 2

From #10 @ http://drupal.org/node/928292

Using stylesheets[all][] = example.css.less is problematic. This usage, while >generally correct, causes example.css.less to load before Omega's stylesheets.

You can use LESS stylesheets in place of regular CSS files using Omega directives, >however:

Create global.css.less in your theme's css folder (important!).

Create a stanza like this in your theme.info file:

    css[global.css.less][name] = My Project styles
    css[global.css.less][description] = LESS CSS stylesheet for My Project.
    css[global.css.less][options][weight] = 10
    settings[alpha_css][global.css.less] = 'global.css.less'

Take a look @ http://drupal.org/node/1233904 for a good start to a LESS file.