乐趣区

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

退出移动版