图：Vivivian
for循环
循环的使用是保持代码干燥和避免重复的好方法。与 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 的其他内容等价statement于典型的 for 循环语法。
下面是一个用 Less 编写的简单 for 循环，它创建多个#img*选择器（其中 是一个数字）并将background-image属性设置为`image.png`
1.for-loop(@index) when (@index > 0) { /* recursive mixin with guard expression - condition */23 /* the statement */4 #img@{index} {5 background-image: url("http://mysite.com/image@{index}.png");6 }7 /* end of the statement */89 .for-loop(@index - 1); /* the next iteration's call - final-expression*/10}11.for-loop(3); /* the primary call - initialization */
编译的CSS：
1#img3 {2 background-image: url("http://mysite.com/image3.png");3}4#img2 {5 background-image: url("http://mysite.com/image2.png");6}7#img1 {8 background-image: url("http://mysite.com/image1.png");9}
forEach 循环
Less 中的 for-each 循环与 for 循环具有相同的关键组件，但有以下区别：
- 包含必须迭代的项目列表的变量。
extract()基于循环索引提取变量中每个项目的函数。- 一个
length()计算数组长度的函数（即列表中的项目数）并在主 mixin 调用（for [initialization]）中使用它。 下面是一个用Less编写的for-each循环示例，它遍历@images变量中的每个项目，创建一个与项目/图像名称相同的#id选择器，并为其设置背景图像属性id
1@images: cat, dog, apple, orange; /* the array list of items */23.for-each-loop(@index) when (@index > 0) { /* recursive mixin call with guard - condition */45 @image: extract(@images, @index); /* extract function to fetch each item from the list */67 /* the statement */8 #@{image} {9 background-image: url("http://mysite.com/@{image}.png");10 }11 /* end of the statement */1213 .for-each-loop(@index - 1); /* the next iteration's call - final-expression */14}1516.for-loop(length(@images)); /* the primary call with length() function - initialization */
编译的CSS：
1#orange {2 background-image: url("http://mysite.com/orange.png");3}4#apple {5 background-image: url("http://mysite.com/apple.png");6}7#dog {8 background-image: url("http://mysite.com/dog.png");9}10#cat {11 background-image: url("http://mysite.com/cat.png");12}
