Less从入门到精通——循环（附源码、学习视频和笔记）

完整学习视频及资料在这里哦~
链接：https://pan.baidu.com/s/1XHxElnc2N-qwg2f2J30Qyw
提取码：4k8t

循环(loop)

在Less中，混合可以调用它自身，这样，当一个混合递归调用自己再结合Guards表达式和模式匹配这两个特性，就可以写出循环结构。

.loop(@counter) when (isnumber(@counter)) and (@counter > 0) {
    .loop(@counter - 1);
    .div@{counter}{
        width: 10 * @counter;
        height: 10 * @counter;
    }
}
li{
    .loop(3);
}
// 输出 生成 3 个 不同的div并分别给了相应的样式
li .div1 {
  width: 10;
  height: 10;
}
li .div2 {
  width: 20;
  height: 20;
}
li .div3 {
  width: 30;
  height: 30;
}