在 Less 循环中构建重复选择器

我已经看到了 LESS 中循环的各种方法，但我还没有找到构建选择器的方法（我猜聚合是正确的术语）。

例如，我想要这样的东西：

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

Where .repeatedClass将根据循环计数生成。.staticClass and .finalStaticClass将是（顾名思义）静态的。

另外，height对于每个循环计数，属性将增加 10（或任何给定数字）。

我会以这种方式处理它：

.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 .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;
}

如果您只需要一次生成一个选择器，您可以跳过第二个循环，只需调用.test()mixin 到任何你需要的地方。