CSS LESS: How to do Looping?

The CSS LESS code output 5%, 10%, 15%... 100%. This is what I wanted to generate with LESS. This code on Stackoverflow provided some clue about "How to Loop" in LESS but it was not working. I have updated there as well.


@iterations: 100;
.loopingClass (@index) when (@index > 0) {
    .span@{index} {
        width: floor(percentage((@index ) *0.01));
    }
    .loopingClass(@index - 5);
}
.loopingClass (@iterations);

Output of the Above LESS code:


.span100 {
  width: 100%;
}
.span95 {
  width: 95%;
}
.span90 {
  width: 90%;
}
.span85 {
  width: 85%;
}
.span80 {
  width: 80%;
}
.span75 {
  width: 75%;
}
.span70 {
  width: 70%;
}
.span65 {
  width: 65%;
}
.span60 {
  width: 60%;
}
.span55 {
  width: 55%;
}
.span50 {
  width: 50%;
}
.span45 {
  width: 45%;
}
.span40 {
  width: 40%;
}
.span35 {
  width: 35%;
}
.span30 {
  width: 30%;
}
.span25 {
  width: 25%;
}
.span20 {
  width: 20%;
}
.span15 {
  width: 15%;
}
.span10 {
  width: 10%;
}
.span5 {
  width: 5%;
}

Easy to test LESS looping code on online LESS compiler.