Question

如果您只是简单地定义一个变量两次，那么第二个定义会按预期延迟加载，但如果您通过mixin执行此操作，它似乎会被反转，因此应用第一个解锁。

.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中的变量将仅显示在其调用范围中。（文档中没有专门的部分，但提到here）。

在您的示例.mixin(30px)中无效，因为@width已经通过之前的.mixin调用（即.mixin(20px)）锁定到范围内。

关于这种行为的讨论here，但似乎没有办法在不破坏许多重要的Less设计模式的情况下改变它。

-

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

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

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

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

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

LessCSS：解锁变量的延迟加载被反转

1 个答案:

-