lesscss - mixins 是否也像变量一样“延迟加载”？答案

【问题标题】：lesscss - Are mixins also "Lazy loaded" like variables?lesscss - mixins 是否也像变量一样“延迟加载”？
【发布时间】：2014-04-21 00:29:30
【问题描述】：

我刚刚发现 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;
}

【问题讨论】：

它们按顺序合并（遵循级联规则）。自己检查：lesstester.com
顺便说一句，我们这里的术语有些偏差......严格来说“延迟加载”并不一定意味着“覆盖”（“变量覆盖概念”本质上只是“最后定义获胜”原则)。 “延迟加载”通常意味着简单的“可以在定义之前使用”（尽管较少的“延迟加载”比这更深一些：注意 local @a 如何影响 lesscss 中第二个示例的本地范围内的全局 @var 值。 org/features/#variables-feature-lazy-loading）。换句话说，准确地说：“延迟加载”确实适用于 mixins，但“最后定义获胜”则不适用。
我认为说混入不是“合并”（也不是“延迟加载”）更准确，就像调用混入将评估并返回每个匹配的混入一样。这类似于 CSS 中的概念，在 HTML 中引用一个类将导入每个类的属性和值。因此，CSS 查找并应用每个匹配的类，Less 在这里对 mixins 执行相同的操作。

标签： less mixins

【解决方案1】：

不，它们不是延迟加载的

如评论中所述，如果它们具有相同的名称，mixin 会“合并”它们的值。所以你的代码会产生这个：

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

在调用同一个属性两次的情况下（就像您的代码那样），这实际上使 CSS 变得等同于它已经“延迟加载”，因为“最终”属性值是使用的那个值。所以上面的内容会被浏览器翻译为：

.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;
}

像变量这样的真正“延迟加载”会覆盖第一组属性调用。

【讨论】：