Less, multiple imports -

i thought within less imports @ rule level?

e.g. given 2 less files identical variable names different values

@import (reference) 'file1.less'  .myrule1 {    @import (reference) 'file2.less'   // use vara file2 }  .myrule2 {    // use vara file1 } 

is not allowed, doesn't seem in latest less version

failing can this

@import (reference) 'file2.less' .myrule1 {    // use vara file2 }  @import (reference) 'file1.less' .myrule2 {    // use vara file1 }  @import (reference) 'file2.less' .myrule3 {    // use vara file2 again } 

what trying accomplish here? kendo ui has multiple themes colours grids, headers, etc. within less file want make this

.blackbasedthemes {  @import 1 of black themes    .mydiv   {     background-color: @tooltipbackgroundcolor;   }    // whole bunch of other stuff }  .nonblackbasedthemes {  @import 1 of not black themes    .mydiv   {     background-color: @tooltipbackgroundcolor;   }    // whole bunch of other stuff } 

and within code body gets nonblackbasedthemes or nonblackbasedthemes class. can add mydiv, etc class div , theme appropriate colour.

i thought within less imports @ rule level? e.g. given 2 less files identical variable names different values 

when using lessc 2.4.0 (less compiler) [javascript] can do:

black.less:

@tooltipbackgroundcolor: black; 

white.less:

 @tooltipbackgroundcolor: white; 

then following code:

.blackbasedthemes {  @import "black";    .mydiv   {     background-color: @tooltipbackgroundcolor;   }    // whole bunch of other stuff }  .nonblackbasedthemes {  @import "white";    .mydiv   {     background-color: @tooltipbackgroundcolor;   }    // whole bunch of other stuff } 

compiles into:

.blackbasedthemes .mydiv {   background-color: black; } .nonblackbasedthemes .mydiv {   background-color: white; } 

indeed not need reference keyword (but should work when using it). not easy see problem is.

notice can import 1 of files global scope:

 @import "black"; // sets `@tooltipbackgroundcolor` global scope .blackbasedthemes {    .mydiv   {     background-color: @tooltipbackgroundcolor; // uses `@tooltipbackgroundcolor` global scope   }    // whole bunch of other stuff }  .nonblackbasedthemes {  @import "white";// sets `@tooltipbackgroundcolor` local scope    .mydiv   {     background-color: @tooltipbackgroundcolor;// uses `@tooltipbackgroundcolor` local scope   }    // whole bunch of other stuff }