少,产生错误的输出(less, producing the wrong output)

2019-10-22 11:37发布

主文件

@import (reference)  './kendo1.less';

.FadedGrid
{
    @import (reference)  './kendo2.less';
}

.FadedGrid
{
    @import (reference)  './kendo2.less';

    .k-grid-header th
    {
        background-color: @input-background-color;
    }
}

kendo1.less

@input-background-color: #000;

kendo2.less

@input-background-color: #fff;

这将产生

.FadedGrid .k-grid-header th {
  background-color: #000000;
}

但这里的颜色应该是#FFFFFF,而不是#000000

Answer 1:

你需要改变你参考导入多个。 如果你将其设置为引用它似乎忽略重复进口同一文件的。

导入选项: http://lesscss.org/features/#import-options

例:

@import (reference)  './kendo1.less';

.FadedGrid
{
  @import (multiple)  './kendo2.less';
}

.FadedGrid
{
      @import (multiple)  './kendo2.less';

  .k-grid-header th
  {
    background-color: @input-background-color;
  }
}

输出:

/* Generated by less 2.4.0 */
.FadedGrid .k-grid-header th {
  background-color: #ffffff;
}


文章来源: less, producing the wrong output
标签: less