更少，多个进口 [英] Less, multiple imports

问题描述

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

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

例如给出了两个具有相同变量名但值不同的Less文件

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
}

这是不允许的吗，它似乎不是最新的Less版本

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

无法执行此操作

@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有多个主题，带有用于网格，标题等的颜色.在我的less文件中，我想做类似的事情

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
}

然后在我的代码中，正文获取NonBlackBasedThemes或NonBlackBasedThemes类.我可以将MyDiv等类添加到div并获取适当的主题颜色.

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.

推荐答案

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]时，我可以执行以下操作:

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

black.less:

black.less:

@tooltipBackgroundColor: black;

white.less:

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关键字(但在使用时也应该起作用).很难看出您的问题所在.

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
}

这篇关于更少，多个进口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！