1

私はそのような効果を達成する必要がありますが、実際に @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);
};

任意の回避策を歓迎します)

4

1 に答える 1

3

& whenそうではありませんif（彼らは通常、簡単にそう言います）。& {...}は依然として独自のスコープを持つ通常のルールセットであり、ルールセット内で定義された変数は外側のスコープでは表示されません。

必要なものを実現するには、条件付き mixin を使用してこれを書き直します (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(したがって、実際のコードでは、私の例のように冗長である必要はありません...正確なコードは、ミックスインの使用法やその他の内部構造によって異なる場合があります)。

（更新）たとえば、次のコード（特定のバリエーションも可能です）は同等です：

.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);
}
于 2015-04-07T17:33:53.850 に答える