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