Use LESS or other CSS preprocessor

Sass requires ruby, there is a module for scaffold (only Drupal 6.x at this time) that is similar and only needs PHP

~

I will investigate this again when a version of Compass is available for D7.

There's another CSS framework that a lot of people really like called LESS.

There's a D7 LESS project here:

http://drupal.org/project/less

IMO this is just a docs issue. I'm currently using with success LESS (even for RTL sites). It doesn't need any special thing from Omega. Just enable the module and add in your info file

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

note the file name extension is to support RTL (#972680: RTL support)

Subscribing, and concluding @Amitaibu is correct.

Subscribe, I'm currently using LESS

@Amitaibu,
Thanks for the suggestion, I'm trying this out, LESS looks great. Can you tell me where the system looks for my less stylesheet? Should it be in my Omega sub-theme css folder like globals.css, or somewhere else? Also, I'm assuming the .info file you speak of is the theme's .info file, am I correct?

Thanks for your advice - something's not working in my setup.
Dave

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'

Thanks, works perfect! Omega & LESS = pure theming power.

how am i able to use .css.less for the responsive grid?
is there another solution for "stylesheets[all and (min-width: 700px)][] = xxx.css.less" in the .info-file?

Anyone successfully using either SASS module with Omega?

http://drupal.org/project/sass
http://drupal.org/project/sassy

I'm curious to know if were able to integrate SASS with the Omega theme as well. I don't want to use LESS because it relies on javascript and has less features than SASS does with Compass.

@chrishrtmn: LESS in Drupal does not rely on Javascript and compiles on the server. Omega integrates very nicely with the LESS module, as I show above. Hopefully someone has tried this with one of the several SASS modules and can report.

This is not working for me. It doesn't generate the global.css file. I'm using less 7.x-2.4 and a subtheme of Omega - Responsive HTML5 Base Theme 7.x-3.0. I have cleared the cache. Am I missing something?

UPDATE: Spoke too soon. I had forgotten to enable the global.css.less file in Omega admin.

#10 works. Thanks.

Note: you have to go to Appearance -> Settings -> Toggle styles to turn on the newly created style.

Returning to postponed as that's what the maintainer set it to originally. There's still some work to be done -- at a minimum, documentation, but hopefully UI integration and using LESS for the responsive grid portions of your CSS.

#10 works for me as well.

But I have to click on 'Flush LESS files' under config>development>LESS settings every time I make a change in the LESS file. Is there a way to make it regenerate automatically whenever I make a change (like when themeing with regular css)? or is this working as it should?

Mengi,

Check that you have the LESS Developer Mode turned on in your LESS configuration. That'll regenerate the files every time the page is loaded.

Thank you welly, I didn't notice the hint pop-up before, seems too obvious now.

@FallingHigh, have you should a solution to using css.less with the responsive grid?

I'm also trying to determine how to get LESS files to work with the responsive configuration. I understand how to get global.css converted but what about narrow, normal, etc?

Actually, I should really learn to test things before I post. ;)

Adding the .less extension to all of omega's css files, changing global.css to global.css.less in the info and activating it in the theme settings actually works great.

I guess the only thing missing from the documentation is just that you need to add the less extension to narrow, normal, etc. I wouldn't have thought those would be picked up!

A few tips...

Since there's multiple files, I've grouped my variables and mixins into a variables.less file and am importing it (@import "variables.less";) at the top of every css/less file that my responsive Omega theme uses.

To add to this, I'm using a LESS Eclipse plug-in that does a great job staying in tune with variables, mixins and syntax errors even across the different files.

Plug-in here:
http://www.normalesup.org/~simonet/soft/ow/eclipse-less.fr.html

Hope this helps someone!

DW

Just an FYI, that what I suggested doesn't work with CSS aggregation turned off.

I'm searching other solutions to fix this within Drupal but am considering just using the native LESS compiler in Eclipse and run it every time I save -- bypassing Drupal all-together. Not ideal but it might be easier in the end.

DW

Not working

I'm afraid the approach outlined in #10 isn't working for me either...
Any thoughts?

I've just tested #10 and can confirm that it works, as long as your sub-theme has never been enabled.

If you have already enabled your sub-theme, you must go to the theme settings under "Toggle styles" and enable the .less file that you added. This is the same procedure required even if it was a plain .css file that was added after the theme was enabled.

Forgot to mention that I've only tested this on D7 so far.

I've made a documentation page that explains the procedure in more detail:

LESS and Omega

*DELETED*

Thanks a lot @corey.aufang, that's great! Even the solution with the responsive styling sounds quite nice.

#10 looks good, but it doesn't work for 7.x-4.0-alpha1. I haven't tried the -dev though, is it supposed to work there?
Though my LESS file works using the old-fashioned method, of course it gets added before system stylesheets.

Correction, it gets added after system CSS files and also after Omega's CSS. It just gets added before fontyourface's CSS files, which are added as CSS_THEME.

I guess then this is expected behavior, can someone confirm?

I got my default/narrow/normal/wide setup fully functional by renaming files to .less, adding all declarations in .info file and leaving styles un-enabled in Omega UI. If I enable these styles i get wide css in mobile view.

Yes we got Sass.