CODEWITHSUNDEEP
less
tony
tony

Reputation: 2392

Less, multiple imports

I thought within Less you could do imports at the rule level?

e.g. given two Less files with identical variable names but different values

@import (reference) 'file1.less'

.myrule1
{ 
  @import (reference) 'file2.less'
  // use varA from file2
}

.myrule2
{ 
  // use varA from file1
}

Is this not allowed, it doesn't seem to be in the latest Less version

Failing that can you do this

@import (reference) 'file2.less'
.myrule1
{ 
  // use varA from file2
}

@import (reference) 'file1.less'
.myrule2
{ 
  // use varA from file1
}

@import (reference) 'file2.less'
.myrule3
{ 
  // use varA from file2 again
}

What am I trying to accomplish here? Kendo UI has multiple themes with colours for grids, headers, etc. Within my less file I want to make something like this

.BlackBasedThemes
{
 @import one of the black themes

  .MyDiv
  {
    background-color: @tooltipBackgroundColor;
  }
   // whole bunch of other stuff
}

.NonBlackBasedThemes
{
 @import one of the not black themes

  .MyDiv
  {
    background-color: @tooltipBackgroundColor;
  }
   // whole bunch of other stuff
}

And then within my code the body gets the NonBlackBasedThemes or NonBlackBasedThemes class. I can just add a MyDiv, etc class to a div and get the theme appropriate colour.

Upvotes: 2

Views: 918

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49044

I thought within Less you could do imports at the rule level?
e.g. given two Less files with identical variable names but different values

When using lessc 2.4.0 (Less Compiler) [JavaScript] i can do:

black.less:

@tooltipBackgroundColor: black;

white.less:

 @tooltipBackgroundColor: white;

Then the 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 you do not need the reference keyword (but it should also work when using it). It is not easy to see what your problem is.

Notice that you can also import one of the files into the global scope:

 @import "black"; // sets `@tooltipBackgroundColor` for the global scope
.BlackBasedThemes
{

  .MyDiv
  {
    background-color: @tooltipBackgroundColor; // uses `@tooltipBackgroundColor` from the global scope
  }
   // whole bunch of other stuff
}

.NonBlackBasedThemes
{
 @import "white";// sets `@tooltipBackgroundColor` for only the local scope

  .MyDiv
  {
    background-color: @tooltipBackgroundColor;// uses `@tooltipBackgroundColor` from the local scope
  }
   // whole bunch of other stuff
}

Upvotes: 1

Related Questions