Css 在较少的循环中构建重复选择器

我已经看到了各种循环更少的方法，但是我还没有找到一种构建选择器的方法（我想凝集应该是正确的术语）

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

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

其中，

.repeatedClass

将根据循环计数生成

.staticClass

和

.finalStaticClass

将是静态的（顾名思义）

---

另外，对于每个loopcount，

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：

---

在小于的情况下，合适的解决方案为：

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

.staticClass{
.环路（5）；
.loop（@n，@i:1）当（@i.finalStaticClass{
高度：10px*@i；
}
.loop（@n，@i+1）；
}
}
}

---

嘿，我尝试了你的方法，但我的输出与你的不同。例如，在编译“.generateClasses（4，10px）；”时，我得到以下结果：.staticClass.repeatedClass.repeatedClass.repeatedClass>.finalStaticClass{height:10px；}.staticClass.repeatedClass.repeatedClass.repeatedClass>.finalStaticClass{height:20px；}.staticClass.repeatedClass.repeatedClass.repeatedClass>.finalStaticClass{height:30px；}.staticClass.repeatedClass.repeatedClass.repeatedClass>.finalStaticClass{height:40px；}问题是变量泄漏超出其范围，这已在Less>=1.4.0中得到解决。请检查您是否正在运行最新版本的Less。我为旧版本的Less添加了一个解决方案。大量类正在运行！很好的解决方案，+1。

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

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