5

CSS グループを生成するような mixin を作成することはできますか? 私は以下の意味を説明します：

.fancymixin(@max, @prefix) {
     //content what I don't know how to code
}

.fancymixin(10, x);

次のようなものが生成されます。

.x10, .x9, .x8, .x7, .x6, .x5, .x4, .x3, .x2, .x1 {
     //some fancy style I want to set
}
4

1 に答える 1

6

以下のように、1 つの基本クラスでループ (保護された mixin を使用して作成) を使用できます。基本クラスには共通のプロパティがあり、必要に応じてループ内から何度でも拡張できます。

フォーム形式で CSS を作成するには、基本クラスと拡張が必要.x1, .x2, .x3{}です。のようにできる場合.x1{} .x2{}、基本クラスと拡張は実際には必要ありません。

.x1{ //base class with all common props
  color: blue;
} 

.fancymixin(@max, @prefix) when (@max > 1) { // loop from 10 to 1
    .fancymixin(@max - 1, @prefix); // call the next iteration of the loop
    .@{prefix}@{max}:extend(.x1){}; // extend the properties of the x1 base class
}

.fancymixin(10, x);

コンパイル済み CSS:

.x1,
.x2,
.x3,
.x4,
.x5,
.x6,
.x7,
.x8,
.x9,
.x10 {
  color: blue;
}

注:.fancymixin(10, y)同じ mixin を呼び出して別のループ ( など) を作成し、グループの個別のプロパティ セットを作成する場合、上記のアプローチは機能しません。.y*これは、常に.x1クラス プロパティを拡張しているためです。

于 2014-08-20T11:56:54.530 に答える