自身调用来实现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;
}
我们来分析上面的那段 Less 代码：
首先看第一行，是一个带有条件判断的混合，这个前面学过。.loop 带有一个参数 @i，当满足条件 @i > 0 时可以执行花括号中的代码。
然后 .loop((@i - 1)) 表示调用混合自身，并且将参数值减去一，这一步只要满足条件判断就会执行，一直执行到 @i > 0
最后就是在 .call 中调用 .loop，给参数 @i 赋值，因为要求是循环输出四次 padding 属性，所以可以给 @i 参数赋值为 4。
通过循环创建多个样式类
使用递归循环最常见的情况就是生成栅格系统的CSS。
示例：
.xkd(@n, @i: 1) when (@i =< @n) {
.grid@{i} {
width: (@i * 100% / @n);
}
.xkd(@n, (@i + 1));
}
.xkd(5);
编译成 CSS 代码：
.grid1 {
width: 20%;
}
.grid2 {
width: 40%;
}
.grid3 {
width: 60%;
}
.grid4 {
width: 80%;
}
.grid5 {
width: 100%;
}
上述代码中， .xkd 一共循环了五次，每循环一次就会创建一个 .gird@{i} 样式类。
有些时候，在实际项目中，我们经常会将字体、颜色、边距等样式作为公共样式放到一个公共的文件中，然后定义一些列的样式，例如字体大小定义 12px、14px、16px 等等，这样一个一个写会比较麻烦，如果使用循环，几句代码就能实现：
.font(@i) when(@i <= 28){
f@{i} {
font-size: @i + 0px ;
}
.font((@i + 2));
}

.font(12);
编译成 CSS 代码：
f12 {
font-size: 12px;
}
f14 {
font-size: 14px;
}
f16 {
font-size: 16px;
}
f18 {
font-size: 18px;
}
f20 {
font-size: 20px;
}
f22 {
font-size: 22px;
}
f24 {
font-size: 24px;
}
f26 {
font-size: 26px;
}
f28 {
font-size: 28px;
}
本节我们主要学习了 Less 中的循环，循环在编程语言中是很常见的，通过循环我们可以减少代码量。有时候大段大段的类似代码，通过循环几句代码就可以实现。