Overriding Variables in Multiple LESS Files

Question

We have a platform that contains several applications in one single interface. There is one general stylesheet and for performance reasons seperate ones for every application. This whole platform is branded for a couple of vendors, everyone having his own colors, etc. We do so by loading another stylesheet for the given branding that just contains the overrides of the default styles.

Now we're thinking about introducing LESS to improve and organize our stylesheets. But we're struggling to find a clean solution for adjusting the variables for each branding.

Here is our project structure:

platform/
    css/
        general.css     (general styles for all applications)
        app1.css        (specific styles for application 1)
        app2.css        (specific styles for application 2)
        ...
        branding1.css   (color overrides for branding 1)
        branding2.css   (color overrides for branding 2)
        ...

With LESS we'd think of this structure:

platform/
    css/
        variables.less  (containing default colors, etc.)
        general.less    (general styles for all applications)
        app1.less       (specific styles for application 1)
        app2.less       (specific styles for application 2)
        ...
        branding1.less  (variables overrides for branding 1)
        branding2.less  (variables overrides for branding 2)
        ...

Now how can we easily apply the branding overrides to all the stylesheets?

What we've found so far is to create branding-specific less files for all stylesheets, for example for general.less to create general.branding1.less:

@import "general.less";
@import "branding1.less";

This creates the desired result for the general styles of branding 1 and of course we can do so for every applications stylesheet. But this would result in n*m files (applications * brandings) with just such two import lines. This doesn't sound like a nice solution (not mentioning the extra handling to reference these files in the HTML header) - isn't there anything better?

Note: We're using Web Essentials to preprocess the files before deploying. Client-side preprocessing is no option.

Answer 1

You could use dotless to serve the less files and skip the Web Essentials compilation step -- the preprocessing would still be server-side. Dotless' HTTP handler accepts variable values from query string parameters, so in your entry point stylesheet you could do:

@import "@{brandName}.less";

and reference it as

<link rel="stylesheet" type="text/css" href="main.less?brandName=foo" />