关于前端: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中文文档