less中的循环

在 Less 中，你可以使用循环来重复生成样式规则。Less 提供了 each 指令和递归混合（mixin）来实现循环功能。下面是一个简单的例子，展示了如何使用这两种方法来生成一系列类名。

使用 each 循环

each 是 Less 3.5 引入的一个强大工具，用于遍历列表或映射。

// 定义颜色列表
@colors: red, green, blue;

.each-loop(@list) {
  @each-color: extract(@list, 1);
  .color-@{each-color} {
    color: @each-color;
  }
  when (length(@list) > 1) {
    .each-loop(extract(@list, 2));
  }
}

.each-loop(@colors);

使用递归混合

这种方法通过递归调用混合来实现循环。

// 定义颜色列表
@colors: red, green, blue;

.loop-through-colors(@index: length(@colors)) when (@index > 0) {
  @current-color: extract(@colors, @index);
  .color-@{current-color} {
    color: @current-color;
  }
  .loop-through-colors(@index - 1);
}

.loop-through-colors();

这两种方法都可以生成类似以下的 CSS 输出：

.color-red {
  color: red;
}
.color-green {
  color: green;
}
.color-blue {
  color: blue;
}