1

mixin宣言の他の2つのパラメーターによって2つのパラメーターをデフォルトとして設定できるようにするborder-radiusのLESS mixinを作成したいと考えていました。以下は、動作しない例ですが、私が達成しようとしているものに似ています:

.border-radius-ext (@topleft: 0, @topright: 0, @bottomright: @topleft, @bottomleft: @topright) {
    border-top-left-radius: @topleft;
    border-top-right-radius: @topright;
    border-bottom-right-radius: @bottomright;
    border-bottom-left-radius: @bottomleft;
}

最初からすべての値を 0 に設定できることに気付きました。それは私が求めているものではありません。ミックスインが次のように使用されている場合、私はそれを望んでいました:

blockquote {
    .border-radius-ext(3px, 5px);
}

ミックスインは次のように出力します。

blockquote {
    border-top-left-radius: 3px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 5px;
}

@bottomright...ミックスインが次のように使用された場合、とのデフォルトを@bottomleftオーバーライドできるようにします。

blockquote {
    .border-radius-ext(3px, 5px, 7px, 2px);
}

その場合、出力は次のようになります。

blockquote {
    border-top-left-radius: 3px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 7px;
    border-bottom-left-radius: 2px;
}

これはLESSでは不可能ですか、それとも間違っていますか?

4

2 に答える 2

3

パラメータのデフォルト値を他のパラメータにすることはできません。ただし、次のアプローチを使用できます。

.border-radius-ext (@topleft, @topright) {
    .border-radius-ext(@topleft, @topright, @topleft, @topright);
}

.border-radius-ext (@topleft, @topright, @bottomright, @bottomleft) {
    border-top-left-radius: @topleft;
    border-top-right-radius: @topright;
    border-bottom-right-radius: @bottomright;
    border-bottom-left-radius: @bottomleft;
}

これで、この mixin を 2 つまたは 4 つのパラメーターで使用できるようになりました。必要に応じて、3 つのパラメーターを持つバージョンを簡単に作成することもできます。

于 2012-09-22T07:07:26.607 に答える
0

mixin は 4 つの変数を想定しているため、4 つ入力する必要があります。デフォルト値の設定は、すべての変数のデフォルトがあり、何も渡さない場合、または（私が思うに）変数を常に最初に配置し、デフォルトを持つ変数を最後に配置する場合にのみ機能します。

いずれにせよ、別の開発者があなたの LESS で作業するようになった場合に混乱が少なくなるため、4 つの変数だけを使用することをお勧めします。

このようなものが良いでしょう：

.border-radius-ext (@topleft: 0, @topright: 0, @bottomright: 0, @bottomleft: 0) {
    border-top-left-radius: @topleft;
    border-top-right-radius: @topright;
    border-bottom-right-radius: @bottomright;
    border-bottom-left-radius: @bottomleft;
}

.border-radius-ext(3px, 5px, 7px, 2px);

また、事前に構築された mixin の優れたコレクションであるLESS 要素 ( http://lesselements.com/ ) を使用することをお勧めします。

于 2012-09-22T06:01:33.977 に答える