如何在Less中创建循环结构？

Less（Leaner Style Sheets）是一个流行的CSS预处理器，它扩展了CSS的功能，包括变量、Mixin、函数以及许多其他技术，这些都可以让你更灵活地编写CSS。然而，Less（和大多数CSS预处理器）并不支持传统的编程循环结构，如for、while等。

不过，你可以使用Less的递归Mixin来模拟循环。以下是一个简单的例子，该例子会生成一系列的类，类名从.size-1到.size-5，每个类都有不同的font-size：

.generate-sizes(@n, @i: 1) when (@i =< @n) {
  .size-@{i} {
    font-size: 10px * @i;
  }
  .generate-sizes(@n, (@i + 1));
}

.generate-sizes(5);

在这个例子中，我们定义了一个名为.generate-sizes的Mixin，它接受两个参数：@n表示我们想要生成的类的数量，@i表示当前的迭代次数（默认为1）。when (@i =< @n)是一个条件语句，当@i小于或等于@n时，Mixin会继续递归调用自身。在每次递归中，我们都会生成一个新的类，其font-size是10px乘以当前的迭代次数。最后，我们通过调用.generate-sizes(5);来生成5个类。

请注意，虽然这种方法可以模拟循环，但由于Less（和CSS）的性能限制，你可能需要避免创建过深的递归，否则可能会导致编译时间过长或内存溢出。

另外，这种递归方法在旧版本的Less中可能会导致性能问题。如果你发现这个问题，你可能需要考虑使用其他方法，或者将你的Less代码拆分成多个较小的文件，以减少编译时的内存使用。