可用递归mixin配合数值列表批量生成间距类，需控制递归边界、单位运算和插值语法；Less不支持for循环，须用带when守卫的递归模拟，避免栈溢出、变量未定义及插值错误。
直接用递归 mixin 配合数值列表就能批量生成，不用手写几十个 .mt-2、.pl-16 这类类名——关键在控制好递归边界、单位表达和插值语法。
为什么不能用 for 循环
Less 原生不支持 for 或 while，写 for (i: 1 to 10) 会直接报 ParseError: Syntax Error。必须靠带守卫条件（when）的递归 mixin 模拟循环逻辑。
- 漏写
when终止条件 → 编译卡死或报Maximum call stack size exceeded - 递归调用写成
.make-classes(@i - 1)却没初始化@i→ 报Variable @i is undefined - 把数字当字符串拼接，比如
.mt-@i而不是.mt-@{i}→ 输出字面量.mt-@i，不解析为.mt-3
怎么安全地生成 px 单位间距类
单位必须参与运算，避免 @i px 这种写法——它在 @i: 0 时输出 0 px（多空格），而 (@i * 1px) 稳定输出 0。
- 数值列表定义清晰：
@lists: 0, 4, 8, 12, 16, 20, 24, 32; - 递归 mixin 必须显式传入初始索引：
.loop(1)，不能靠默认值 - 提取值用
extract(@lists, @index)，不是@lists[@index]（Less 不支持数组下标访问） - 属性值写成
margin-top: (@num * 1px) !important;，括号包裹乘法防解析错误
如何扩展支持 rem 和负值
单纯 when (@i > 0) 拦不住负数，要生成 .mt--2 就得拆成两段逻辑：正数 + 负数分别递归，或改用 each() 配合列表（Less 4.0+ 支持）。
- rem 场景推荐用比例因子：
margin-top: (@i * 0.25rem);，比硬写0.25rem更易维护 - 负值需额外分支：
.make-mt-classes(@i) when (@i ，再调用.make-mt-classes(@i + 1) -
each()更适合离散值：.each(@lists, {.mt-@{value} { margin-top: (@value * 0.25rem); }})，但无法处理连续区间（如 1–20）
真正容易被忽略的是单位一致性——同一套工具类里混用 px 和 rem 会导致计算错乱；还有 !important 的使用场景是否真需要全局强制覆盖，这些细节比生成逻辑本身更影响后期维护成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
