mixin 内部的 LESS 条件变量变化答案

【问题标题】：LESS conditional variable change inside mixinmixin 内部的 LESS 条件变量变化
【发布时间】：2015-04-10 22:28:55
【问题描述】：

我需要达到这样的效果，但即使@padding实际上

.btn-svg-offset(@height, @padding) {
    @paddings-n: floor(@height / @padding);
    @multiplier: 2;

    & when (@padding < @height) {
        @multiplier: 1;
    }

    @btn-svg-offset: @padding + ((@height / @multiplier) * @paddings-n);
};

欢迎任何解决方法）

【问题讨论】：

标签： variables less conditional-statements less-mixins

【解决方案1】：

& when 不是if （他们通常只是简单地说）。 & {...} 仍然是一个有自己作用域的常规规则集，在规则集中定义的变量在外部作用域中是不可见的。

为了实现你所需要的，使用条件 mixins 重写它（mixin 的内部（包括变量）实际上已扩展到调用者范围）：

.btn-svg-offset(@height, @padding) {
    @paddings-n: floor(@height / @padding);

    .-() {@multiplier: 2} .-;
    .-() when (@padding < @height) {
        @multiplier: 1;
    }

    @btn-svg-offset: @padding + ((@height / @multiplier) * @paddings-n);
}

请注意，您可以将相同的条件放在 .btn-svg-offset mixin 本身上（因此在实际代码中，它不必像我的示例中那样冗长……确切的代码可能会有所不同，但这取决于 mixin 的使用及其其他内部）。

（更新。）例如，以下代码（某些变体也是可能的）将是等效的：

.btn-svg-offset(@height, @padding, @multiplier: 2) {
    @paddings-n: floor(@height / @padding);
    @btn-svg-offset: @padding + @height / @multiplier * @paddings-n;
}

.btn-svg-offset(@height, @padding) when (@padding < @height) {
    .btn-svg-offset(@height, @padding, 1);
}

【讨论】：

嘿，伙计，这个非常好.-！问题是，与 .- when (@padding
P.S. LESS 应该有真实的，如果现在，会非常方便））我知道 SASS 有，但我讨厌它）
我认为这两种解决方案都不起作用，因为 @multiplier: 2 在调用 when 之前泄漏到调用方范围，然后“无法覆盖直接在调用方范围中定义的变量。” （当使用 mixins 作为函数时）。所以你需要两个 btn-svg-offset mixin 和不同的 quards 来解决这个问题。我不确定这是某种错误。 @seven-phases-max 说：& {...} is still a regular ruleset。但我希望.mixin { & when (){}} 应该像.mixin{} 后跟.mixin when(){}
@BassJobsen，“导致 @multiplier: 2 在调用 when 之前泄漏到调用者范围” - 并非如此，同一 mixin 的两个定义同时扩展（如果它们是不同的 mixin，它们不会)。有关详细信息，请参阅#80。
...（继续上一条评论）-“但我希望 .mixin { & when (){}} 的行为应该像 .mixin{} followed by .mixin when(){}”不太一样。令人困惑的一点可能是 & {} 块的 CSS 属性最终合并到父规则集（以删除重复的选择器），但这并不意味着它应该以任何方式影响变量和 mixins 的可见性（有在 #1877 和 #2072 对此进行重新辩论，并且很可能提议的更改不会通过......玛丽和我反对它 - 因为它会违反太多的范围界定规则......）。