LessCSS：未锁定变量的延迟加载反转

【问题标题】：LessCSS: lazy-loading of unlocked variable reversedLessCSS：未锁定变量的延迟加载反转
【发布时间】：2014-05-30 12:13:15
【问题描述】：

参考this SO post 和the docs。

如果你只是定义一个变量两次，第二个定义会按预期延迟加载，但如果你通过 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;
}

谁能解释一下？

【问题讨论】：

标签： less

【解决方案1】：

mixin 中的变量只有在范围没有定义这样的变量时才会暴露在它的调用范围中。（文档中没有专门的部分，但提到了here）。

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

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

-

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

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

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

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

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

【讨论】：