本节我们学习 Less 中的循环 (Loop),循环在编程语言中应该是很常见的,一般编程语言中都有循环,例如在 JavaScript 中有 for
循环、while
循环等,但是在 Less 中没有这两种语法,而是通过自身调用来实现循环。
循环的使用
在 Less 中,混合可以调用它自身,当一个混合递归调用自身,再结合 guard 表达式和模式匹配这两个特性,就可以写出循环结构。
示例:
例如循环输出四个 padding
属性:
.loop(@i) when (@i > 0) {
.loop((@i - 1)); // 递归调用自身
padding: (10px + 5 * @i);
}
.call{
.loop(4); // 调用循环
}
编译成 CSS 代码:
.call {
padding: 15px;
padding: 20px;
padding: 25px;
padding: 30px;
}