variables - mixin 内部的 LESS 条件变量变化

Question

我需要达到这样的效果，但即使@padding 实际上 < @height 它仍然使用乘数 2，这是无意义的......有什么我不知道的限制吗？

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

欢迎任何解决方法）

Answer 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-offsetmixin 本身上（因此在实际代码中，它不必像我的示例中那样冗长……确切的代码可能会有所不同，但取决于 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);
}