less的loop属性可以循环元素

1.使用场景

loop是循环元素自身，但可以给元素的子属性也设置样式，而且一个元素没有必要设置多次同一个属性。
所以比较适合父元素下面有多个相同的子元素时，想为子元素设置相同的属性，但属性值略有不同的时候。

2.实例

<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.不同的写法

loop可以从小到大遍历，也可以从大到小遍历，而且传入参数的个数也不固定。
上面的写法是从大到小，下面的是从小到大：

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

---

参考资料：less中文文档