Question

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

e.g。给出两个具有相同变量名但值不同的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有多个主题，网格，标题等颜色。在我的文件中，我想制作类似的东西

.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类。我可以将一个MyDiv等类添加到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 Compiler）[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
}

少，多次进口

1 个答案: