Question

我刚刚发现，less中的变量是“延迟加载”（如此处所述：http://lesscss.org/features/#variables-feature-lazy-loading），如果你设置一个变量，使用它然后将它设置为另一个值，即编译代码将使用最后设定值。

即

@w: 30%;

.myclass {
   width: @w;
}

将编译为：

.myclass {
   width: 50%
}

同样适用于mixins吗？

即。将

.mycolor() {
   color: red;
}

.myclss {
  .mycolor()
}

.mycolor() {
   color: blue;
}

编译为:(没有懒惰）

.myclass {
   color:red;
}

或（懒惰）：

.myclass {
   color:blue;
}

Answer 1

不，它们不是延迟加载的

如评论中所述，mixins＆＃34; merge＆＃34;它们的值如果它们具有相同的名称。所以你的代码会产生这个：

.myclss {
  color: red;
  color: blue;
}

在两次调用相同属性的情况下（就像你的代码一样），有效地使CSS变得等同于它已经＆＃34;延迟加载＆＃34;因为＆＃34; final＆＃34;属性值是使用的值。因此，上述内容将由浏览器翻译为：

.myclss {
  color: blue;
}

但将它视为延迟加载是不正确的，因为如果存在其他属性，它们只是合并。所以：

.mycolor() {
   color: red;
   opacity: 0.3;
}

.myclss {
  .mycolor()
}

.mycolor() {
   color: blue;
   border: 1px solid black;
}

变为：

.myclss {
  color: red;
  opacity: 0.3;
  color: blue;
  border: 1px solid black;
}

真实＆＃34;延迟加载＆＃34;比如变量会覆盖第一组属性调用。