LESS and Omega

Documentation on integrating the LESS module and Omega theme framework.

Usually when creating a sub-theme adding custom stylesheets is as simple as adding a snippet to your theme's .info file:

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

Only with Omega this goes against the grain and causes the compiled 'example.css.less' to show up before Omega's own CSS files.

So when in Rome, do as Omega does and use the following example:

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

When you are building a fresh sub-theme that has yet to be enabled, the above example will work perfectly.

If you tried the above and are wondering why its not working, then the most likely reason is that you already enabled your theme and added the .info entries after, but don't worry there is a simple fix.

Go to your Omega sub-theme configuration settings and open the 'Toggle styles' section. You should see the stylesheet you added now appearing near the bottom of the 'Enable optional stylesheets' section. Check the box and save the sub-theme settings and your stylesheet should now be processed correctly.

Responsive Styling in Omega

Responsive Styling patch

There is a patch to correct responsive styling in Omega: #1627478-14: CSS preprocessor order conflict

Remember that if you're using a subtheme with an underscore in the system name to follow item 4 of http://drupal.org/node/1298682.

Without patch

If you do not want to apply a patch, you can use the classes that are automatically set on the body and change when the window size changes. This does depend on JS, but that is not an unreasonable requirement today. Keep in mind that this can cause a slight delay in rendering the page as expected:

• responsive-layout-wide
• responsive-layout-mobile
• responsive-layout-narrow
• responsive-layout-mobile

.test {
  font-size: 20px;

  .responsive-layout-mobile & {
    font-size: 12px;
  }
}

The above code will generate:

.test {
  font-size: 20px;
}
.responsive-layout-mobile .test {
  font-size: 12px;
}

This should also work with any custom responsive rules that you create.