2

誰かが使用したい CSS プロパティ、プロパティの値、およびそれを必要とするベンダー (Opera、Mozilla、Firefox、Webkit、IE) を指定できるベンダー プロパティ用の Less mixin を作成しようとしています。 、 なし）。

私はもともと SASS here でコードを書きましたが、Less に移植するのに苦労しています。

これが私が現在持っているものです：

.vendor(@property, @value, @vendors...) {
  .vendor-detect() when (@vendors = webkit) {
    -webkit-@{property}: @value; 
  }

  .vendor-detect() when (@vendors = moz) {
    -moz-@{property}: @value; 
  }

  .vendor-detect() when (@vendors = ms) {
    -ms-@{property}: @value; 
  }

  .vendor-detect() when (@vendors = o) {
    -o-@{property}: @value; 
  }

  .vendor-detect() when (@vendors = official) {
    @{property}: @value; 
  }

  .vendor-detect();
}

現在、コードを次のように使用する場合:

.button { 
    .vendor(border-radius, 4px, official);
}

あなたは得る：

.button {
  border-radius: 4px;
}

しかし、ミックスインで複数のベンダーを宣言できるようにしたいので、次を使用します。

.button { 
    .vendor(border-radius, 4px, webkit moz official);
}

私に提供する必要があります：

.button {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

しかし、今はそうではありません。

vendorsでは、この mixin でパラメーターをループするにはどうすればよいでしょうか。

4

1 に答える 1

3

vendors以下のメソッドを使用して、パラメーターをループできます。コードは理解するのが非常に簡単ですが、簡単にするためにインライン コメントを追加しました。

以下：

.vendor(@property, @value, @vendors...) {
    .loop-vendors(@vendorCount) when (@vendorCount > 0){ // for loop for creating the req prefixes 
        .loop-vendors(@vendorCount - 1); // call the next iteration
        @vendor: extract(@vendors, @vendorCount); //extract the value from vendors list based on loop index
        -@{vendor}-@{property}: @value; // populate the vendor specific versions.
    }
    .loop-vendors(length(@vendors)); // call the loop based on length of vendors list

    @{property}: @value; //populate the official value finally
}


.button { 
    .vendor(border-radius, 4px, webkit moz ms o); // calling the vendor mixin
    .vendor(box-shadow, 1px 1px 4px gray, webkit moz ms o); // calling the vendor mixin
}

コンパイルされた出力:

.button {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 1px 1px 4px #000000;
  -moz-box-shadow: 1px 1px 4px #000000;
  -ms-box-shadow: 1px 1px 4px #000000;
  -o-box-shadow: 1px 1px 4px #000000;
  box-shadow: 1px 1px 4px #000000;
}

コードペンデモ

追加情報：

  1. Seven-phases-maxは、LESS の for ループを模倣するためのラッパー mixin を作成しました。そのサンプルは、このスレッドにあります。非常にシンプルですが効果的な方法ですので、ぜひご覧になることをお勧めします。ループを実行する最も基本的な方法を示したかったので、上記のサンプル コードではそれを使用していません。コメントで、彼はラッパーを利用するこの要点にも親切に貢献してくれました。for

  2. これは、LESS でベンダー プレフィックスを追加するもう 1 つの一般的な方法ですが、必要なベンダー プレフィックスのリストに基づいて選択的に処理することはできません。

  3. 上記のサンプルでは、official​​キーワードvendorsは自動入力されるため、リストに含める必要はありません。将来の証明のために、常にそこに残しておくことをお勧めします。

于 2014-08-10T03:31:48.723 に答える