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

First of all why do you have these bloating `.st_xx`? This is a common Less mistake/misuse - mixin *parameters* should not be a part of the mixin name... For more details see https://stackoverflow.com/questions/41721356 and stuff linked there. — seven-phases-max, Jun 22 '17 at 14:57
Those are classes generated by an online spritesheet generator. All spritesheet code is in one less file, the implementation is over several other less files. Keeping this in seperate files gives more overview and is the spritesheet changes (larger images/smaller images/etc.) I only have to change the spritesheet block of code rather than go searching in the dfferent other less files. — Saffron, Jun 23 '17 at 06:56
So if it's a generator why don't you generate your `**.prog**` stuff right away? That's the problem with reusing existing CSS classes - they are made to be used within HTML *only* and not convenient as programmatically reusable components (i.e. to be used to generate another CSS). — seven-phases-max, Jun 23 '17 at 11:04
I do understand your point but reuse of classes is not discouraged, right? See: http://lesscss.org/features/#mixins-feature — Saffron, Jun 23 '17 at 13:16
*lesscss.org/features/#mixins-feature* They should rewrite this stuff 5 years ago - that part of the docs reflects the state of the language at 2009-2010 where there were no such things as selector interpolation, parametric mixins, extends and so on and so on (it was just nothing but "plain dumb CSS with variables"). Since then everything changed drastically. — seven-phases-max, Jun 25 '17 at 20:24

score -1 · Answer 1 · answered Jun 22 '17 at 11:56

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

answered Jun 22 '17 at 11:56

Alpesh Rathod

385
3
10

If I see this correctly, your loop sets the property width. I don't want to set any properties so I only want to call a classname and semicolon – Saffron Jun 22 '17 at 12:10

call dynamic classname in less loop

1 Answers1