Less's loop attribute can loop elements

1. Use scenario

loop is the loop element itself, but you can also set styles for the element's sub-attributes, and there is no need to set the same attribute multiple times for an element.
Therefore, it is more suitable when there are multiple identical child elements under the parent element and you want to set the same attributes for the child elements, but the attribute values are slightly different.

2. Examples

<div class="wrap">
  <template v-for="i in 5">
    <div class="box"></div>
  </template>
</div>

.wrap {
  margin: 50px;
  .loop(5);
  .box {
    border: 1px solid red;
  }
}
.loop(@n) when (@n > 0) {
  .loop((@n - 1));
  & .box:nth-child(@{n}) {
    width: (10px * @n);
    height: (10px * @n);
  }
}

3. Different ways of writing

loop can traverse from small to large, or from large to small, and the number of incoming parameters is not fixed.
The above wording is from big to small, and the following is from small to big:

.loop(@n, @i:0) when (@i <= @n) {
  .loop(@n, (@i + 1));
  & .box:nth-child(@{i}) {
    width: (10px * @i);
    height: (10px * @i);
  }
}

---

Reference: less Chinese document