LESS css loop example

loop.less

.loop (0) {}
.loop (@index) when (@index > 0) {
  .classname-@{index} {
    top: @index * 1px;
  }
  .loop (@index - 1);
}
 
#example {
  .loop(5);
}

output.css

#example .classname-5 {
  top: 5px;
}
#example .classname-4 {
  top: 4px;
}
#example .classname-3 {
  top: 3px;
}
#example .classname-2 {
  top: 2px;
}
#example .classname-1 {
  top: 1px;
}

What is the top .loop (0) {} there for? Just trying to understand this.

The top .loop(0) {} is the base case, while .loop(index -1) is the recursive case.
You may see examples without the base case. Those cases are assuming .loop(0) is not implemented.

Hello, can we multiply the index for any value?
In SCSS we can do this:

$class-slug: spacer !default;
@for $i from 1 through 20 {
    &.#{$class-slug}-#{$i*5} {
        width: 100%;
        max-width: 600px;
        height: ($i*5px);
        max-height: ($i*5px);
        min-height: ($i*5px);
        line-height: ($i*5px);
        font-size: ($i*5px);
    }
}

You can check here the output http://www.sassmeister.com/
Now i can say that my class-(index*5), can we do this with LESS?

Best regards, Mário Silva.

            @max-grid-items : 20;
            .grid-row-loop (0) {}
            .grid-row-loop (@index) when (@index > 0) {
              @nextIndex : (@index * 2);
              @prevIndex : (@nextIndex - 1);
              &:nth-child(@{prevIndex}) {
                grid-row: @index;
              }
              &:nth-child(@{nextIndex}) {
                grid-row: @index;
              }
              .grid-row-loop (@index - 1);
            }
            .grid-row-loop (@max-grid-items);