更少 - 覆盖变量似乎不起作用

Question

我试图覆盖一些较少的变量，但它似乎不起作用。 以下是我想要做的事情：

@hightlight-color-orange-01:    #ffbf7f;

@import 'customLess';

customLess.less的内容：

@hightlight-color-orange-01:    #d1b545;

但是来自customLess.less的样式将被忽略。

我有办法在@import上做到这一点吗？

此致 启

Answer 1

Less语言就像CSS一样是一种声明性语言。对于变量延迟加载和最后一个声明胜利规则将被应用。

以下少量代码：

p {
 color: @color;
}

@color: red; 
@color: yellow;

按如下方式编译成CSS：

p {
color: yellow;
}

因此，您可以在声明（延迟加载）之前使用@color，并且@color在代码中的任何地方评估yellow（最后声明获胜）。

请注意，last declaration wins仅计算同一范围内的变量（或更好的本地范围可以否决父范围，但反之亦然）：

@value: global;

selector1 {
prop: @value;
}

selector2 {
@value: local;
prop: @value;
}

输出：

selector1 {
  prop: global;
}
selector2 {
  prop: local;
}

来自@import指令的代码将在代码中注入最上层，并在应用最后一个声明之前获胜。