Less 循环

本节我们学习 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/