如何利用less 实现循环

在 Less 中可以使用循环语句来生成重复的样式规则，循环语句包括 for 循环和 while 循环。

下面是一个使用 for 循环生成重复样式规则的示例：

@iterations: 3; // 定义循环次数
@base: 5px; // 定义基础值

.loop {
  width: @base;
  height: @base;
  for (@i: 1; @i < @iterations; @i++) { // 进行循环
    .loop-@{i} {
      width: @base + @i * 5px; // 根据循环次数生成样式规则
      height: @base + @i * 5px;
    }
  }
}

在上面的示例中，我们定义了一个循环次数 `@iterations` 和一个基础值 `@base`，然后使用 for 循环生成了 `.loop-1`、`.loop-2` 和 `.loop-3` 三个样式规则，根据循环次数生成不同的样式。

当编译成 CSS 时，将会生成以下样式规则：

.loop {
  width: 5px;
  height: 5px;
}
.loop-1 {
  width: 10px;
  height: 10px;
}
.loop-2 {
  width: 15px;
  height: 15px;
}

可以看到，通过循环语句，我们可以很方便地生成一组重复的样式规则，而不需要手动编写每个规则。