里面混入LESS条件变量的变化(LESS conditional variable change i

我需要实现这样的效果，但即使实际上@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 （他们通常这样说只是为了短）。 & {...}仍然是有规律的规则集有自己的范围和规则集内定义的变量不是外部范围可见。

为了达到你所需要的，重写这个使用条件的混入（混入的内部（包括变量）实际上是扩展到呼叫者范围。）：

.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混入本身（所以在真正的代码，它不必是冗长的在我的例子......确切的代码可以尽管这取决于混入的使用及其变化其它内）。

（UPD）例如下面的代码（某些变化是可能的也是如此）将是一个等价的：

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

文章来源: LESS conditional variable change inside mixin