避免 less 循环崩溃的核心方法是确保递归或混合调用有明确的终止条件，通常通过判断变量状态（如计数器归零）来实现。在编写 `loop()` 这样的递归混合时，必须在内部检查当前参数是否满足结束条件，若不满足则进行下一次调用，若满足则直接返回空值以停止递归。这样 less 编译器就能正确解析并生成预期的 css 类，而不会陷入无限递归导致内存溢出。
如何设计安全的递归终止逻辑
在设计 Less 循环时，必须引入一个可变的计数器或状态量，并在每次迭代中修改它。当该变量达到预设的边界值时，递归调用应当被跳过。这种结构确保了编译过程是有限的，从而避免了死循环。例如，使用一个从 N 递减到 0 的计数器，并在小于等于 0 时不再触发自身调用。
@max: 3;
.loop(@i) when (@i > 0) {
.class-@{i} { width: @i * 10px; }
.loop(@i - 1);
}
.loop(@max);
上述代码定义了一个名为 .loop 的混合，接收参数 @i。当 @i 大于 0 时，它会生成一个 CSS 类并再次调用自身，传入 @i - 1。一旦 @i 变为 0，条件不成立，递归停止。最终生成的 CSS 包含 .class-3、.class-2 和 .class-1，宽度分别为 30px、20px 和 10px。
如何处理嵌套循环中的状态隔离
当需要在循环内部执行复杂操作或嵌套其他循环时，必须确保内部状态不会影响外部循环的终止条件。通常的做法是将内部逻辑封装在独立的混合中，或者使用局部变量来保存当前迭代的上下文。这样可以防止因内部逻辑错误导致的意外递归或状态污染。
@colors: red, blue, green;
.generate(@list) when (length(@list) > 0) {
.inner(@item: nth(@list, 1)) {
.color-@{item} { color: @item; }
}
.inner();
.generate(extract(@list, 2));
}
这段代码展示了如何遍历颜色列表。外层混合 .generate 检查列表长度，内层混合 .inner 处理单个元素。通过 extract 函数获取剩余列表传递给下一次递归，确保了每次迭代只处理一个元素，且不会干扰主循环的计数逻辑。最终输出为 .color-red、.color-blue 和 .color-green。
当计数器初始值为负数时会发生什么
如果将初始计数器设置为负数，且终止条件仍为大于 0，则递归永远不会终止，因为负数减去 1 会变得更小，永远无法满足终止条件。这会导致 Less 编译器抛出“Maximum nesting level exceeded”错误，即典型的死循环崩溃现象。因此，必须保证初始值与终止条件的方向一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
