3

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?

  • Anyone using less and Omega theme together ? – Refineo Nov 17 '11 at 14:08
6

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.

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.

  • One more (required) step is to enabled the 'global.css.less' file in your theme's Toggle Styles -> Optional Stylesheets settings. – Yuriy Babenko May 4 '13 at 21:53

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.