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

mixin 中的 LESS 条件变量更改

LESS conditional variable change inside mixin

variables

less

conditional-statements

less-mixins