关于前端: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/