Less递归Mixin必须带when守卫条件（如when (@i > 0)）并显式传递更新参数，否则编译栈溢出；类名拼接须用@{i}插值；超20层应换PostCSS或预生成方案。
Less递归Mixin必须带守卫条件，否则编译直接卡死
Less不支持运行时循环，所谓“递归”只是编译期展开的Mixin自我调用。没有when守卫，编译器会无限展开直到栈溢出，报错Maximum call stack size exceeded或静默截断（尤其在Webpack less-loader中）。
守卫必须基于参数判断，且参数需在每次调用中更新：
-
when (@i > 0)是安全写法；when (@i = 0)容易因浮点误差或负数漏判而失效 - 递归调用里必须显式传新值，比如
.loop((@i - 1))，不能只写.loop()或依赖外部变量 - 守卫要写在Mixin体内部，不能放在调用语句后——Less不支持条件调用语法
生成类名必须用@{var}插值，@var会当变量名解析
想拼出.col-3，得写.col-@{i}；如果写成.col-@i，Less会尝试查找名为@i的变量，找不到就丢掉后缀，最终可能生成.col-这种非法选择器。
插值还影响作用域稳定性：
立即学习“前端免费学习笔记（深入）”；
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 避免在递归体里复用同名变量，比如
@prefix: "col"写在Mixin外，递归中改它会导致所有层级共享同一值 - 需要动态前缀时，应作为参数传入：
.gen-col(@n, @prefix: "col")，再用.@{prefix}-@{n} - 字符串拼接别用
~"..."包裹未展开变量，~"col-@i"不会插值，输出就是字面量col-@i
超过20层递归就该换方案，别硬扛编译限制
Less 4.x默认最大嵌套深度约128，但真实项目中超过20层就容易触发--max-call-levels限制。Webpack less-loader默认maxCallStackDepth: 10，生成12列栅格都可能被截断。
遇到深层循环需求，优先考虑替代路径：
- 用
less-plugin-functions引入JS逻辑，在.less里调用myLoop(50) - 切到PostCSS +
postcss-for，语法更直觉：@for $i from 1 to 50 { .item-{$i} { ... } } - 构建时用脚本预生成CSS文件，完全绕过Less编译瓶颈
递归Mixin不是万能的，复杂逻辑会反噬可维护性
当需求涉及多条件分支（如“偶数列加边框、素数列设特殊背景”）、运行时状态判断、或嵌套层级耦合强时，递归Mixin会让代码变成黑盒。调试困难、修改成本高、协作门槛陡增。
真正该用递归的场景其实很窄：
- 纯数值序列展开：生成
.col-1到.col-12、h1到h6字号 - 固定值列表遍历：对
@justify-values: start, center, between逐个生成类 - 结构确定、无副作用的样式批量产出
一旦出现if/else嵌套、跨参数联动计算、或需要回溯状态，就说明已经超出了递归Mixin的设计边界。
