Question

在编程中我们最常用的逻辑处理除了条件判断之外，其次就是循环了。在上一个小节中我们已经学习了条件判断，这个小节我们具体学习一下循环，在其他的编程语言中我们都是通过 for 循环的结构去实现的循环结构。但是在 Less 中并没有这么一种语法，而是通过自身调用从而实现的循环递归。同时我们需要运用之前我们学习到的条件判断从而跳出循环。

1. 语法定义

官方定义： Creating loops .

慕课解释： 创建循环。

2. 方法详情

在 Less 中，我们可以通过 mixins 结合 guard 函数自身调用从而达到类似于 for 循环的效果，创建各种循环迭代结构。

例如：

@list:a,b;

.for(@counter) when (@counter < length(@List)+1) {
  .background-@{counter} {
    background-image: url("./images/@{extract(@list,@counter)}.png")
  }
  .for(@counter+1)
}

.for(1)

上述的代码中，.for 通过 when() 函数控制 @counter 参数并调用自身，达到了类似于循环的效果，每一次循环都会返回一个结果。

输出代码如下：

.background-1 {
    background-image: url("./images/a.png")
}

.background-@{counter} {
    background-image: url("./images/b.png")
}

3. 使用场景

循环主要用于动态创建多个样式类或多个属性值。

4. 示例

我们来使用递归循环创建一个 CSS 网格类：

• 输入代码：

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}

.generate-columns(4);

.generate-columns 一共循环了 4 次，每一次循环都会创建一个 .column-@{i} 类及其对应的样式类。当然我们也可以通过这种方式生成多个属性值相同的样式类。

• 输出代码

.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}

总结

本章节我们介绍了 Less 中的循环，循环（loops）其实是 minxin 和 guard 结合的一种语法。在循环之前我们可以创建一个列表保存需要循环的数据，合理的结合使用可以达到循环迭代的效果。