Dynamic class names in LESS

Question

I have the following bit of LESS code working

            @iterations: 940;
            @iterations: 940;
            @col:2.0833333333333333333333333333333%;
           


        

Answer 1

This whole question was very helpful to me. I just wanted to post the solution to my problem as the way to do it has changed since LESS v 1.4. LESS Changelog

Rather than using the ~ sign, you just write out the portion of the name that you want along with the normal @ and variable name with {} surrounding it. So: #class@{variable}.

For example, my solution using the same sort of loop became such:

/*Total number of passport inserts*/
@numInserts: 5;
/*Total width of the passport foldouts*/
@passportWidth: 300px;
/*Change in passport insert width per iteration*/
@passportWidthDiff: (@passportWidth / @numInserts);
/*"Array" of colors to select from to apply to the id*/
@passportColors: 
blue orange green red yellow 
purple white teal violet indigo;

/*The faux loop the doesn't end up in the final css
@index is the counter
@numInserts is the total number of loops*/
.loopingClass (@index) when (@index <= @numInserts){
   /*This is the created ID with the index appended to it
   You can also do this with classes such as if 
   we had had ".insert@{index}"*/
   #insert@{index}{
      /*Here are our properties that get adjusted with the index*/
      width: (@passportWidth - (@passportWidthDiff * (@numInserts - @index)));
      height: 50px;
      background-color: extract(@passportColors, @index);
      z-index: (@numInserts - @index);
   }
   /*Here we increment our loop*/
   .loopingClass(@index + 1);
}
/*This calls the loop and starts it, I started from 1
since I didn't want to lead a className starting from 0,
But there is no real reason not to.  Just remember to
Change your conditional from "<=" to "<"*/
.loopingClass(1);

And produces the following:

#insert1 {
  width: 60px;
  height: 50px;
  background-color: #0000ff;
  z-index: 4;
}
#insert2 {
  width: 120px;
  height: 50px;
  background-color: #ffa500;
  z-index: 3;
}
#insert3 {
  width: 180px;
  height: 50px;
  background-color: #008000;
  z-index: 2;
}
...

Answer 2

I don't think you're far off. What I've done is create a second variable inside the mixin, called @index2. All this does is find the '920px minus @index' value that you're looking for:

@index2 = (920-@index);

this is then appended to the class name:

(~".gs@{index}-@{index2}") {

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

In order to get just the set you are looking for (gs220-700 to gs700-220), just change @iterations to equal 700.

Worth noting that currently, this will create the classes in the reverse order of how you specified them in the question.