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

问题描述

我已经看到了在LESS中循环的各种方法，但是我还没有找到构建选择器的方法(凝结是我猜想的正确术语).

I've seen various ways of looping in LESS, but I haven't found a way to build selectors (agglutinate would be the right term I guess).

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

For example, I'd like something like this:

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

将根据循环计数在其中生成.repeatedClass的位置. .staticClass和.finalStaticClass将是静态的(顾名思义).

Where .repeatedClass would be generated according to the loopcount. .staticClass and .finalStaticClass would be (as the name implies) static.

此外，每个循环计数的height属性将增加10(或任何给定的数字).

Also, the height property would be increased by 10 (or any given number) for every loopcount.

推荐答案

我会以这种方式进行处理:

I would go about it somehow in this manner:

.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是要增加的值.

Where you pass on to the next loop the concatenated generated classes and each time add another class. The @index is the counter for the loop, and @n is the value that you want to increase.

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)，以限制变量.然后，您可以遍历此过程，按照以下步骤进行操作:

Edit - for older versions of Less:

in Less <= 1.3.3, you need to include the individual concatenating loops in a separate role (it is called .test in the example below), that confines the variable. Then you can loop through this, doing something along these lines:

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

if you just need to generate a selector once at a time, you can skip the second loop and just call the .test() mixin wherever you need it.

这篇关于在Less循环中构建一个重复选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！