Question

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

例如，我想要这样的事情：

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

根据loopcount生成.repeatedClass的位置。 .staticClass和.finalStaticClass（顾名思义）是静态的。

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

Answer 1

我会以这种方式以某种方式解决这个问题：

.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＆lt; = 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;
}

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

Answer 2

正确的解决方案是：

.staticClass {
    .loop(5);
    .loop(@n, @i: 1) when (@i <= @n) {
        .repeatedClass {
            > .finalStaticClass {
                height: 10px * @i;
            }
            .loop(@n, @i + 1);
        }
    }
}

<强> Demo

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

2 个答案:

编辑 - 适用于较旧版本的Less：