本节咱们学习 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;}咱们来剖析下面的那段 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 中的循环，循环在编程语言中是很常见的，通过循环咱们能够缩小代码量。有时候大段大段的相似代码，通过循环几句代码就能够实现。
链接：https://www.9xkd.com/