Question

我需要达到这样的效果，但即使@padding实际上＆lt; @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中的条件变量较少

1 个答案: