<p>Less递归Mixin必须加守卫条件，否则编译期无限展开导致崩溃或内存溢出；守卫需用when语法且最终为false，如when (@i >= 1)配合@i - 1递减；生成.col-1至.col-12应确保参数递进与终止精准。</p>
Less递归Mixin为什么必须加守卫条件
不加守卫的递归会无限编译，直接让Less编译器崩溃或卡死。Less没有运行时栈限制，递归调用会在编译期展开成嵌套结构，一旦失控就生成超大CSS文件甚至内存溢出。
- 守卫条件必须用
when语法，且最终能变为false - 典型错误是写成
when (@i > 0)却忘了每次递减@i，导致守卫恒真 - 推荐用
when (@i >= 1)配合@i - 1递减，避免边界漏判
生成列宽类名的递归Mixin怎么写才不重复
目标是输出 .col-1 到 .col-12，每个类设置对应宽度（如 8.333%）。关键在参数传递和终止控制。
.make-cols(@i: 1) when (@i =< 12) {
.col-@{i} { width: (100% / 12) * @i; }
.make-cols(@i + 1);
}@i = 是Less中“小于等于”的正确写法，<code> 不被识别- 必须显式调用
.make-cols(@i + 1)，否则递归不会触发 - 类名拼接用
@{i}，不是@i；漏掉花括号会导致字面量输出
用递归生成响应式网格时，媒体查询怎么嵌套才不爆炸
为每个断点（sm/md/lg）都跑一遍列循环，容易产生 3 × 12 = 36 个规则，但若嵌套不当，实际可能生成数百行冗余CSS。
- 不要在递归内部写完整媒体查询块，改用参数传入断点名和最大值：
.make-grid-for-breakpoint(sm, 12) - 每个断点单独调用一次递归Mixin，避免守卫逻辑交叉干扰
- 用
@media (min-width: 576px)而非@media screen and (min-width: ...)，后者在部分Less版本中触发解析异常
编译后CSS体积暴增？检查这三点
递归本身不慢，但错误用法会让输出CSS膨胀数倍——尤其当守卫失效、变量未重置、或混入被意外多次引入时。
立即学习“前端免费学习笔记（深入）”；
- 确认
.make-cols只被调用一次，比如放在根作用域末尾，而非被其他Mixin反复引用 - 避免在递归体里使用
@import或再次调用含递归的其他Mixin - 用
lessc --no-js编译可禁用JS求值，防止动态计算干扰守卫判断
递归Mixin真正难的不是写法，而是想清楚「谁控制迭代深度」「谁负责终止」「哪些值必须随每次调用更新」——这三个变量没理清，后面全是无效调试。
