写一个简单的 for 循环

Created: November-22, 2018

循环的使用是保持代码 DRY 并避免重复的绝佳方法。与 Sass 不同，Less 中没有用于编写循环的内置 @for 或 @each 指令，但它仍然可以使用递归 mixin 编写。递归 mixin 只不过是一个不断调用自己的混合。

使用 Less 编写的循环有四个关键组件，它们如下：

具有保护表达的 mixin。当满足循环的退出标准时，保护用于终止循环。在 JavaScript for 循环（for([initialization]; [condition]; [final-expression])）方面，后卫是 [condition]。
对 mixin 执行第一次迭代的主要调用。对 mixin 的这个主要调用可以在选择器块内（如果 mixin 没有包含其所有内容的选择器）或从选择器块外部（如果 mixin 有一个包含其内容的选择器）。就 JavaScript for 循环而言，这个主要调用充当 [initialization]，因为它为类似计数器的变量设置了基本值。
从内部调用 mixin 以使其递归。此调用通常将计数器变量的递增或递减值作为参数传递。因此它调用后续迭代。就 JS for 循环而言，这与 [final-expression] 一起进行下一次调用。
最后但并非最不重要的是，mixin 的其他内容相当于典型 for 循环语法中的 statement。

下面是一个用 Less 编写的简单 for 循环，用于创建多个 #img*选择器（其中*是数字），并将 background-image 属性设置为 image*.png。

.for-loop(@index) when (@index > 0) { /* recursive mixin with guard expression - condition */

  /* the statement */
  #img@{index} {
    background-image: url("http://mysite.com/image@{index}.png");
  }
  /* end of the statement */

  .for-loop(@index - 1); /* the next iteration's call - final-expression*/
}
.for-loop(3); /* the primary call - initialization */

编译 CSS：

#img3 {
  background-image: url("http://mysite.com/image3.png");
}
#img2 {
  background-image: url("http://mysite.com/image2.png");
}
#img1 {
  background-image: url("http://mysite.com/image1.png");
}