Less css loop generates same classes

Question

I'm trying to generate this css:

img.consults {
    /*some css*/
}
img.coworkers {
    /*some css*/
}
img.dashboard {
    /*some css*/
}

with these less css code.

@type1: "dashboard";
@type2: "consults";
@type3: "coworkers";

.loopingClass (@index) when (@index > 0) {
    @ctype: "type@{index}";
    @type: e(@@ctype);
    img.@{type} {
        /*some css*/
    }

    .loopingClass (@index - 1);
};

.loopingClass(3);

Instead of the desired css code. I get three times

img.dashboard {
   /*some css*/
}

It should start generating img.consults, since it is a count down, but I end up with three times img.dashboard, which is the first one, so should be generated last. I can't get my head around it! What am I doing wrong here?

FYI-your code outputs as expected by you on LESS 1.4+ when testing on this site: less2css.org. But it does have the issue you mention for LESS 1.3.3 (and presumably below that as well). — ScottS
– ScottS, Commented Jul 29, 2013 at 15:04

ScottS · Accepted Answer · 2013-07-29 15:46:20Z

4

To Fix But in Version 1.3.2 or 1.3.3

The original code in the question works in LESS 1.4+, but has issues in the two versions previous to that. Those issues can be worked around by nesting the use of the defined variable variable in another mixin call. So this works (for 1.4+ also, but why do more code than necessary if one has upgraded to that):

LESS

@type1: "dashboard";
@type2: "consults";
@type3: "coworkers";

.loopingClass(@index) when (@index > 0) {
    @ctype: "type@{index}";
  .setClass(@className) {
     img.@{className} {
         /*some css*/ 
     }
   }
  .setClass(e(@@ctype));
  .loopingClass(@index - 1);
};

.loopingClass(3);

CSS Output

img.coworkers {
  /*some css*/
}
img.consults {
  /*some css*/
}
img.dashboard {
  /*some css*/
}

answered Jul 29, 2013 at 15:46

ScottS

72.4k13 gold badges131 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

netiul Over a year ago

Version 1.3.3 was indeed the problem. I've upgraded :)

Collectives™ on Stack Overflow

Less css loop generates same classes

1 Answer 1

To Fix But in Version 1.3.2 or 1.3.3

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

To Fix But in Version 1.3.2 or 1.3.3

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related