少，多导入

Question

我认为在 Less 中您可以在规则级别进行导入？

例如给定两个变量名相同但值不同的 Less 文件

@import (reference) 'file1.less'

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

.myrule2
{ 
  // use varA from file1
}

这个不行吗，好像不是最新的Less版本

不行你能做到吗

@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
}

我想在这里完成什么？ Kendo UI 有多个带有网格颜色的主题，headers，等等。在我的 less 文件中，我想制作这样的东西

.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
}

然后在我的代码中 body 获取 NonBlackBasedThemes 或 NonBlackBasedThemes class。我可以将 MyDiv 等 class 添加到 div 并获得适合主题的颜色。

Answer 1

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

使用 lessc 2.4.0（Less 编译器）时 [JavaScript] 我可以：

black.less:

@tooltipBackgroundColor: black;

white.less:

 @tooltipBackgroundColor: white;

然后是下面的代码：

.BlackBasedThemes
{
 @import "black";

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

.NonBlackBasedThemes
{
 @import "white";

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

编译成：

.BlackBasedThemes .MyDiv {
  background-color: black;
}
.NonBlackBasedThemes .MyDiv {
  background-color: white;
}

您确实不需要 reference 关键字（但使用它时也应该有效）。不容易看出你的问题是什么

请注意，您还可以将其中一个文件导入全局范围：

 @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
}

少，多导入

Less, multiple imports

less