Less 支持循环功能，允许你重复生成样式规则。循环在处理大量样式规则、生成复杂的样式或者用于生成网格系统等方面非常有用。以下是 Less 中循环的基本用法：

for 循环：
// 使用 for 循环生成样式规则
.generate-colors(@count) {
  .-loop(@index) when (@index > 0) {
    // 计算颜色
    @color: spin(hue(@base-color) + (@index * 10));

    // 生成样式规则
    .color-@{index} {
      background-color: @color;
    }

    // 递归调用循环
    .-loop(@index - 1);
  }

  // 开始循环
  .-loop(@count);
}

// 调用循环生成样式规则
.generate-colors(5);

在这个例子中，.generate-colors 混合接受一个参数 @count，然后使用 for 循环生成指定数量的颜色规则。在循环中，通过 Less 的插值语法 @{index} 动态生成样式类名，并使用 spin 函数生成不同的颜色。

each 循环：
// 使用 each 循环生成样式规则
.generate-colors(@colors) {
  .loop(@index) when (@index > 0) {
    // 取出颜色
    @color: extract(@colors, @index);

    // 生成样式规则
    .color-@{index} {
      background-color: @color;
    }

    // 递归调用循环
    .loop(@index - 1);
  }

  // 开始循环
  .loop(length(@colors));
}

// 调用循环生成样式规则
@colors: red, blue, green, yellow, orange;
.generate-colors(@colors);

在这个例子中，.generate-colors 混合接受一个参数 @colors，然后使用 each 循环生成样式规则。在循环中，使用 extract 函数获取颜色，并动态生成样式类名。

这些是 Less 中基本的循环用法，可以根据需要进行调整和扩展。循环提供了一种有效的方式来生成重复的样式规则。


转载请注明出处：http://www.zyzy.cn/article/detail/4298/Less