在mixin中较少条件变量的更改 [英] LESS conditional variable change inside mixin

问题描述

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

I need to achieve such effect, but even when @padding actually < @height it still use multiplier value 2, which is non-sense...Is there any limitation i don't know about?

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

欢迎使用任何解决方法)

Any workarounds are welcome)

推荐答案

& when不是if(通常这样简称). & {...}仍然是具有自己作用域的常规规则集，并且在规则集中定义的变量在外部作用域中不可见.

& when is not if (they usually say so just for short). & {...} is still a regular ruleset with its own scope, and variables defined inside a ruleset are not visible in outer scopes.

要实现所需的功能，请使用条件mixins进行重写(mixin的内部结构(包括变量)实际上已扩展到调用者作用域中):

To achieve what you need, rewrite this using conditional mixins (mixin's internals (incl. variables) are actually expanded into the caller scope):

.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的用法及其其他内部).

Note that you can put the same condition onto the .btn-svg-offset mixin itself (so in real code it does not have to be that verbose as in my example... Exact code may vary though depending on the mixin usage and its other internals).

(更新).例如，以下代码(也可能有某些变化)是等效的:

(Upd.) For example the following code (certain variations are possible too) would be an equivalent:

.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中较少条件变量的更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！