css - Less multiple files import

Question

I'm working on WordPress theme that needs to have color schemes functionality. I am forced to use less on this project. I have file called schemes.less, that contains code for styling different colored sections on a webpage. Then I have set of less files called: dark.less, light.less, blue.less etc. I am importing them using default values technique (http://lesscss.org/features/#variables-feature-default-variables), but because of lazy loading if I import the scheme.less multiple times every time I have the same variables.

Are there any ways to workaround that?

Answer 1

Isolate themes from each other with "unnamed" namespaces:

& {
    @import (multiple) "schemes.less"
    @import "dark.less";
}

& {
    @import (multiple) "schemes.less"
    @import "light.less";
}

// etc.

(Assuming you're using an up-to-date Less compiler, not lessphp - for that one you need minor modifications - e.g. remove (multiple) etc.).