CODEWITHSUNDEEP
cssless
netiul
netiul

Reputation: 2769

Less css loop generates same classes

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?

Upvotes: 3

Views: 524

Answers (1)

ScottS
ScottS

Reputation: 72261

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*/
}

Upvotes: 4

Related Questions