How to use LESS to manage multiple site themes

Question

So I understand that a similar question has been asked somewhat before : Structure a stylesheet to manage skins or themes Although I think due to kapsula not being able to articulate (him/her)self properly it was deemed unclear.

I am working on a large project with mulitple CSS/LESS files. We have broken up a lot of the monolithic CSS files into individual ones for CSS specific to certain pages as well as common CSS files for common elements on each page (menus, image placeholders, etc..)

We would like to incorporate multiple themes for the project so we decided upon the following structure:

In the base directory we have all the CSS/LESS specific to all the pages in project, except the colours which we set in the theme directories which are situated within the base directory.

So it looks something to the effect of this:

-CSS
  - ORANGE [directory]
    -> classic.less
    -> controls.less
  -> classic.less
  -> controls.less

Inside the classic.less file in the ORANGE directory we simply insert the directive @import "../classic.less" and upon saving the file our CSS is generated with all our lovely colour themeing as stipulated in the ORANGE->classic.less file.

So while this process has saved a little bit of work in terms of management of the files, every time I make a change in base directory (maybe i added a new element type to the front end) I have to go into each LESS file that inherits from it and save it again in order for the new CSS to be generated.

Is there a more efficient way of doing this? Or am I looking at doing themeing in an incorrect manner. Should I illustrate what I am trying to do a little bit more?

Answer 1

There is a more flexible way, but you'll need WinLess (maybe it's doable with something else, I just found this to serve my needs) which requires Windows. There should be something similar for other OS'es if you search.

What I've done is, in the CSS or Stylesheet folder of my project, I've created another one named LessBase. Here I keep the core stylesheets. Example:

-Stylesheets
  -LessBase
    ->jquery-ui.less
    ->forms.less
    ->buttons.less
    ->grids.less
    ->widgets.less
    ->etc

Then, in the Stylesheets folder, you'll need additional folders with your individual themes. Building on the previous example:

-Stylesheets
  -LessBase
    ->jquery-ui.less
    ->forms.less
    ->buttons.less
    ->grids.less
    ->widgets.less
    ->...
    ->all.less
  -Orange
    ->color-theme.less
    ->main.css
  -Black
    ->color-theme.less
    ->main.css

Please note the all.less file. This one is used to import all the files within the LessBase:

@import "buttons.less";
@import "forms.less";
etc

The color-theme.less will basically hold all of your colors. Inside LessBase, all of your .less files will have variables which will be defined in each of the color-theme.less file residing in the theme folder.

Your color-theme.less file might look like this:

@main_color: #edf123;
@secondary_color: #daa123;
@border_color: #e7e7e7;
.
.
.
@import "../LessBase/all.less"

The import of all.less has to be at the end, in order to have the variables defined.

Then, inside WinLess you will make the color-theme.less compile into the main.css placed in the corresponding theme folder.

Here is a screenshot with an example (I blurred out the sctructure. Also, default_1, default_2 are the theme names, replace them with orange, black or whatever theme name you have):