css - 在 Less 循环中构建一个重复选择器

Question

我在 LESS 中看到过各种循环方式，但我还没有找到构建选择器的方法(我猜聚合是正确的术语)。

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

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

其中 .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 <= 1.3.3 中，您需要将各个连接循环包含在单独的 Angular 色中(在下面的示例中称为 .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。