2

LESS でループするさまざまな方法を見てきましたが、セレクターを作成する方法は見つかりませんでした (集約は正しい用語だと思います)。

たとえば、次のようなものが欲しいです。

.staticClass .repeatedClass .repeatedClass > .finalStaticClass{
    height: 20px;
}

.repeatedClassループ回数に応じて生成される場所。.staticClassそして.finalStaticClass（名前が示すように）静的になります。

また、heightプロパティはループ回数ごとに 10 (または任意の数値) ずつ増加します。

4

2 に答える 2

2

私はこの方法で何とかそれについて行きます：

.generateClasses (@index, @n, @in:"") when (@index > 0) {
    @concatenate: "@{in} .repeatedClass";
    @selector: ~".staticClass @{concatenate} > .finalStaticClass";
    @{selector}{ height: unit(@n,px) };
    .generateClasses((@index - 1), (unit(@n) + 10), @concatenate);
}
.generateClasses(0, @n, @in){};

.generateClasses(4, 10px);

連結された生成されたクラスを次のループに渡し、そのたびに別のクラスを追加します。は@indexループのカウンターで、@n増やしたい値です。

CSS 出力:

.staticClass  .repeatedClass > .finalStaticClass {
  height: 10px;
}
.staticClass  .repeatedClass .repeatedClass > .finalStaticClass {
  height: 20px;
}
.staticClass  .repeatedClass .repeatedClass .repeatedClass > .finalStaticClass {
  height: 30px;
}
.staticClass  .repeatedClass .repeatedClass .repeatedClass .repeatedClass > .finalStaticClass {
  height: 40px;
}

編集 - Less の古いバージョンの場合:

Less <= 1.3.3 では、個々の連結ループを別のロール (.test以下の例で呼び出されます) に含めて、変数を制限する必要があります。次に、これをループして、次の行に沿って何かを実行できます。

.generateClasses (@index, @n, @in:"") when (@index > 0) {
    @concatenate: "@{in} .repeatedClass";
    @selector: ~".staticClass @{concatenate} > .finalStaticClass";
    .generateClasses((@index - 1), (unit(@n) + 10), @concatenate);
}
.generateClasses(0, @n, @in){};

.test(@i, @ni){
    .generateClasses(@i,@ni);
    @{selector} {
        height: @ni;
    }
}

.printClasses(@i:1,@ni:10px) when (@i > 0) {
    .test(@i,@ni*@i);
    .printClasses(@i - 1,@ni);
}

.printClasses(4);

出力 CSS は次のようになります。

.staticClass  .repeatedClass .repeatedClass .repeatedClass .repeatedClass > .finalStaticClass {
  height: 40px;
}
.staticClass  .repeatedClass .repeatedClass .repeatedClass > .finalStaticClass {
  height: 30px;
}
.staticClass  .repeatedClass .repeatedClass > .finalStaticClass {
  height: 20px;
}
.staticClass  .repeatedClass > .finalStaticClass {
  height: 10px;
}

セレクターを一度に 1 つずつ生成する必要がある場合は、2 番目のループをスキップして、.test()必要な場所で mixin を呼び出すことができます。

于 2013-07-17T12:15:53.450 に答える