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

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

于 2013-07-17T12:15:53.450 回答
1

正确的解决方案是:

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

演示

于 2017-10-14T14:14:32.937 回答