call dynamic classname in less loop

Question

My css should look like this:

&.classname {
     &.prog0 {.st_0;}
     &.prog10 {.st_10;}
     &.prog20 {.st_20;}
     &.prog30 {.st_30;}
     &.prog40 {.st_40;}
     &.prog50 {.st_50;}
     &.prog60 {.st_60;}
     &.prog70 {.st_70;}
     &.prog80 {.st_80;}
     &.prog90 {.st_90;}
     &.prog100 {.st_100;}
}

I know you can make a loop to add properties but can you make a loop for calling a function as well? My less won't compile if I just type it out :/

I tried someting like this:

.generate(@n, @i: 0) when (@i =< @n) {
    &.prog@{i} {
        .st@{i});
    }
    .generate(@n, (@i + 10));
}

Answer 1

This is the complete loop:

.loopingClass (@index) when (@index > 160) {
    @index2 = (920-@index);
    // create the actual css selector, example will result in
    // .myclass_30, .myclass_28, .... , .myclass_1
    (~".gs@{index}-@{index2}") {
    // your resulting css
        width: (@index/20+1)*@col;
    }
    // next iteration
    .loopingClass(@index - 60);
}
// "call" the loopingClass the first time with highest value
.loopingClass (@iterations);