写一个 for-each 循环

Less 中的 for-each 循环具有与 for 循环相同的关键组件，但以下差异除外：

• 一个变量，包含必须迭代的项列表。
• 一个 extract() 函数，用于根据循环索引提取变量中的每个项目。
• length() 函数用于计算数组的长度（即列表中的项目数），并在主要 mixin 调用中使用它（对于 [initialization]）。

下面是用 Less 编写的每个循环的示例，它遍历 @images 变量中的每个项目，创建一个 #id 选择器，其中 id 与项目/图像名称相同，并为其设置背景图像属性。

@images: cat, dog, apple, orange; /* the array list of items */

.for-each-loop(@index) when (@index > 0) { /* recursive mixin call with guard - condition */
  
  @image: extract(@images, @index); /* extract function to fetch each item from the list */
  
 /* the statement */
  #@{image} {
    background-image: url("http://mysite.com/@{image}.png");
  }
  /* end of the statement */

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

.for-loop(length(@images)); /* the primary call with length() function - initialization */

编译 CSS：

#orange {
  background-image: url("http://mysite.com/orange.png");
}
#apple {
  background-image: url("http://mysite.com/apple.png");
}
#dog {
  background-image: url("http://mysite.com/dog.png");
}
#cat {
  background-image: url("http://mysite.com/cat.png");
}