unit() 更安全，因它强制覆盖原单位避免混叠（如0.5rem×2→1px），而字符串拼接易致1rempx等解析失败；需先变量赋值再用于calc()，且函数须加isnumber守卫。
为什么 unit() 比字符串拼接更安全
直接写 @spacing-2: @base * 2 + 'px' 看似简单，但遇到 @base: 0.5rem 时会产出 1rempx ——单位混叠，浏览器解析失败。而 unit(@base * 2, px) 会强制覆盖原单位，unit(0.5rem * 2, px) 输出 1px，类型明确、无歧义。
常见错误现象：get-spacing(2) 返回 8（纯数字），后续用于 calc(@spacing-2 + 4px) 变成 calc(8 + 4px)，整条 CSS 被浏览器丢弃。
-
unit()是唯一能可靠剥离并重置单位的内置函数，适用于所有需要参与calc()的场景 - 不推荐用
~'@{value}px'：它绕过类型系统，unit(0, px)得到0px，而~'0px'在某些旧版 Less 中可能被误判为无效值 - 当基础值本身带单位（如
@base: 0.25rem），先用unit(@base * 4, rem)保持语义一致性，再统一转 px 或 rem
如何让 get-spacing() 支持动态单位参数
硬编码单位（如全用 px）会卡死响应式演进。正确做法是把单位作为可选参数传入，内部用 unit() 校验转换：
.get-spacing(@n, @unit: px) when (isnumber(@n)) and (@n >= 0) {
@val: @base * @n;
@result: unit(@val, @unit);
@result;
}
调用示例：.get-spacing(3, rem) → 1.5rem（假设 @base: 0.5rem）；.get-spacing(2) → 8px（默认单位生效）。
- 必须加
when (isnumber(@n))守卫，否则传入sm字符串时编译报错 - 避免在函数内做单位推导（如自动把
rem转成px），那会破坏设计系统中单位的语义边界 - 若项目已混用
px和rem，建议只允许两种单位，禁止em或vh——它们依赖上下文，无法静态计算
unit() 在 calc() 中的边界行为要注意
calc() 不接受函数调用，所以不能直接写 calc(unit(@base * 2, px) + 1px)。必须先将单位化结果赋给变量，再代入：
@s2: .get-spacing(2); margin: calc(@s2 + 1px);
否则 Less 编译器会把 unit() 当作普通 CSS 函数输出，浏览器不认识，整条声明失效。
- 所有参与
calc()的变量，必须提前完成单位绑定，不能留到运行时 - 如果
@base是4px，.get-spacing(2)返回8px，那么calc(@s2 + 1px)合法；但如果返回的是8（无单位），calc(8 + 1px)就非法 - 旧版本 Less（unit()，需降级用
@{base * 2}px，但必须确保@base是纯数字，否则插值失败
全局 spacing 变量必须一次生成、零重复
在 variables.less 中只调用一次 .make-spacing(@base: 4px, @max: 8)，它内部用递归循环生成 @spacing-1 到 @spacing-8，每个都走 unit(@base * @n, px)。任何额外的 @import 或重复调用都会导致 CSS 体积膨胀、变量覆盖不可控。
容易踩的坑：有人在组件文件里又写一遍 .make-spacing(8px)，结果 @spacing-1 被重定义为 8px，而全局其他地方还是 4px，视觉节奏彻底断裂。
- 所有间距变量必须共用同一套
@base和@max，仅靠命名空间区分用途（如@padding-xs和@margin-md是别名，不是新生成） - 禁止在
.make-spacing()内部输出 CSS 规则，它只负责变量生成；样式类（如.p-2）应由独立的循环 mixin 控制 - 如果项目需多套基础步长（如移动端用
2px，桌面端用4px），应拆成两个命名空间：@spacing-mobile-1和@spacing-desktop-1，而非复用同一组变量名
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
