Build a repetitive selector within a Less loop

Question

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 somet

Answer 1

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

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 output:

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

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

output CSS will now be:

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

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.

Answer 2

The proper solution would be:

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

Demo.