LessCSS:反向加载未锁定变量

Question

关于这是如此的帖子和医生们。

如果您只定义了两次变量，那么第二个定义就会像预期的那样被延迟加载，但是如果您通过一个混合器来执行这个定义，它就会被逆转，所以第一个解锁就被应用了。

.mixin(@input) {
  @width: @input;
}

.selector {
  width: @var;
}

@var: 30px;
@var: 40px;

.mixin(20px);
.mixin(30px);

.selector-2 {
  width: @width;
}

输出：

.selector {
  width: 40px;
}
.selector-2 {
  width: 20px;
}

有人能解释一下吗？

Answer 1

只有在未定义该变量的情况下，mixin中的变量才会公开到它的调用范围中。(文档中没有专门的部分，但提到了这里)。

在您的示例中，.mixin(30px)没有任何效果，因为以前的.mixin调用(即.mixin(20px))已经将@width解锁到了作用域中。

有关于这种行为这里的讨论，但似乎没有办法改变它，除非打破许多重要的较少的设计模式。

-

顺便提一下，另一个相关的例子：

.mixin() {
    @width: 10px;
}

.mixin() {
    @width: 20px;
}

.selector {
   .mixin();
    width: @width;
}

在这种情况下，结果是20px，因为两个混频器同时展开，最后一个@width定义获胜。