Question

I have a set of .less files

these are imported in theme.less likes this


    @import "a.less";
    @import "b.less";
    @import "c.less";

and compiles to theme.css

I got 2 less files which defines same variables with different values.


    vars_blue.less
    vars_green.less

this is for theming. a.less,b.less & c.less refer these variables. If I import vars_blue.less in above 3 less files, i will get blue theme.

I am trying to create a dynamic theme but avoiding include of variables in above 3 files, instead in theme.less


    @import "vars_blue.less";
    @import "a.less";
    @import "b.less";
    @import "c.less";

since variables are used in 3 child .less files above is not supported. its expecting to import in each .less file where its used.

How to create 2 theme.less like


    theme_blue.less

    @import "vars_blue.less";
    @import "a.less";
    @import "b.less";
    @import "c.less";

and


    theme_green.less

    @import "vars_green.less";
    @import "a.less";
    @import "b.less";
    @import "c.less";

Answer 1

I'm don't know how to use less so my answer could be very bad.

In these kind of case how about making it this way :

you create a theme_vars.less containing only :

@import "vars_green.less";

or

@import "vars_blue.less";

then in a.less, b.less and c.less your start by :

@import "theme_vars.less";

this way when you need to change theme, only theme_vars.less need to be modified