3

Mindscape Web Workbench （pro）を使用して、LESSファイルからCSSを生成しています。同じ名前で引数の数が異なる2つのミックスインがあります。

LESSのドキュメントによると、呼び出しの引数の数に基づいて、正しいミックスインが自動的に選択されるはずです。ドキュメントの関連セクションは次のとおりです。

アリティで照合することもできます。例を次に示します。

.mixin (@a) {
  color: @a;
}
.mixin (@a, @b) {
  color: fade(@a, @b);
}

ここで、単一の引数を使用して.mixinを呼び出すと、最初の定義の出力が取得されますが、2つの引数を使用して呼び出すと、2番目の定義、つまり@aが@bにフェードされます。

しかし、これは私には当てはまらないようです。

以下は、ミックスインの2つのバージョンです.border-radius。1つ目は単一の引数を取り、2つ目はカスタムの引数セットを送信できるようにします。クラス#searchboxは単一引数のミックスインを#search呼び出し、クラスは複数引数のミックスインを呼び出します。

少ないミックスイン

.border-radius (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

.border-radius (@topleft: 5px, @topright: 5px, @bottomleft: 5px, @bottomright: 5px) {
    -webkit-border-radius: @topleft @topright @bottomright @bottomleft;
    -moz-border-radius: @topleft @topright @bottomright @bottomleft;
    border-radius: @topleft @topright @bottomright @bottomleft;
}

#searchbox {
    .border-radius(1px);
}

#search {
    .border-radius(2px, 3px, 4px, 5px);
}

生成されるCSSは、 Arity （引数の数）を尊重しません。代わりに、以下の生成されたCSSが示すように、単一の引数で呼び出すと両方のミックスインが実行され、複数の引数で呼び出すと正しいミックスインのみが実行されるようです。

生成されたCSS

#searchbox {
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;

  -webkit-border-radius: 1px 5px 5px 5px;
  -moz-border-radius: 1px 5px 5px 5px;
  border-radius: 1px 5px 5px 5px;
}

#search {
  -webkit-border-radius: 2px 3px 5px 4px;
  -moz-border-radius: 2px 3px 5px 4px;
  border-radius: 2px 3px 5px 4px;
}

私は何が間違っているのですか？

4

2 に答える 2

3

引数のデフォルト値を省略する必要があります。そうしないと、3 つの「不足している」引数のデフォルトを使用できるため、引数が 1 つしか指定されていない場合でも、2 番目の mixin が呼び出されなくなります。

以下は意図したとおりに機能します。

.border-radius (@topleft, @topright, @bottomleft, @bottomright) {
    /*...*/
}

.border-radiusただし、 2 つまたは 3 つの引数を指定して呼び出そうとすると、エラーが発生するようになりました。3 番目と 4 番目の値にデフォルト値を指定して、mixin が引数のすべての数 (1-4) を想定し、1 つの引数のみに対して 2 番目の mixin を実行しないようにすることができます。

.border-radius (@topleft, @topright, @bottomleft:5px, @bottomright:5px) {
    /*...*/
}

したがって、最終的に使用できます（最近は borderadius の接頭辞を安全に省略できます）：

/* 1 arg */
.border-radius (@radius: 5px) {
    border-radius: @radius;
}
/* 2 args */
.border-radius (@tlbr,@trbl) {
    border-radius:@tlbr,@trbl;
}
/* 3 and 4 args */
.border-radius (@topleft, @topright, @bottomleft, @bottomright: 5px) {
    border-radius: @topleft @topright @bottomright @bottomleft;
}
于 2013-03-07T08:50:45.170 に答える
0

それぞれ 1 つの引数と 4 つの引数を持つ 2 つの関数で十分です。すなわち:

.border-radius(@radius:0px) {
    -webkit-border-radius:@radius;
    -moz-border-radius:@radius;
    border-radius:@radius;
}
.border-radius(@topLeftRadius, @topRightRadius, @bottomLeftRadius:0px, @bottomRightRadius:0px) {
    -webkit-border-radius:@topLeftRadius @topRightRadius @bottomLeftRadius @bottomRightRadius;
    -moz-border-radius:@topLeftRadius @topRightRadius @bottomLeftRadius @bottomRightRadius;
    border-radius:@topLeftRadius @topRightRadius @bottomLeftRadius @bottomRightRadius;
}
于 2015-01-12T13:59:27.410 に答える