less 4.x 中 unit() 和 unitless() 是核心解法：unit() 剥离或重设单位，unitless() 判断值是否无单位，二者用于显式类型转换以规避算术运算报错。
Less 4.x 中 unit() 和 unitless() 是核心解法
带单位（如 12px）和无单位（如 1.5）值在 Less 4.x 中不能直接参与算术运算，否则会报错 Operation on an invalid type。必须显式转换类型——unit() 用于剥离或重设单位，unitless() 用于判断是否可安全参与纯数值计算。
常见错误场景：写 @base: 16px; @scale: 1.2; @size: @base * @scale;，Less 4.x 直接报错，因为 px * number 不被允许。
-
unit(@value)剥离单位返回纯数字（unit(12px) → 12），也可加新单位（unit(12, 'rem') → 12rem） -
unitless(@value)返回布尔值，unitless(1.5) → true，unitless(12px) → false，适合做条件分支 - 混合计算前务必先用
unit()提取数值，再按需加回单位，不要依赖隐式转换
避免 + 拼接导致的单位丢失
Less 4.x 对 + 运算更严格：两个带单位值相加时，单位必须一致，否则报错；若一方无单位，结果默认继承另一方单位——但容易误判，尤其在变量嵌套中。
例如：@a: 10px; @b: 2; @c: @a + @b; 在 4.x 中结果是 12px，看似合理，但若 @b 实际来自函数返回值（如 round(1.7)），可能因类型推导失败而中断编译。
- 显式使用
unit(@a) + @b再包裹unit(..., 'px')，逻辑更可控 - 禁用
+做“数值+单位”混搭，比如10 + px是非法语法，Less 4.x 不支持字符串拼接式单位构造 - 涉及动态单位（如根据
@mode: 'em'切换单位）时，用unit(unit(@val), @mode)而非字符串拼接
函数内单位处理要主动校验
自定义函数（.foo(@x)）接收参数时，Less 不自动归一化单位。如果函数内部要做乘除，必须提前用 unitless() 判断并分支处理，否则运行时报错位置难以定位。
典型问题：传入 .foo(1.2) 和 .foo(12px) 却共用同一行 @result: @x * 10;，后者必然失败。
- 推荐模式：
is-unitless: unitless(@x); @val: if(is-unitless, @x, unit(@x)); @result: unit(@val * 10, unit(@x, '')); -
unit(@x, '')安全提取原始单位字符串（unit(12px, '') → 'px'），比正则匹配可靠 - 避免在函数里用
~'@{x}px'强转，这生成的是字符串而非 CSS 值，后续无法参与计算
兼容性注意：Less 3.x 自动转换在 4.x 中已移除
Less 4.x 默认关闭了宽松单位转换（如 12px * 2 → 24px），这是故意为之——为消除歧义和提升类型安全。如果你从 3.x 升级后突然大量报错，不是写法错了，而是旧行为被废止了。
没有全局开关能恢复 3.x 行为，必须逐处修复。最省事的过渡方式是封装一个兼容函数：
.safe-multiply(@a, @b) {
@a-num: unit(@a);
@b-num: unit(@b);
@unit-a: unit(@a, '');
@unit-b: unit(@b, '');
@result-num: @a-num * @b-num;
@final-unit: if(@unit-a = '', @unit-b, @unit-a);
@result: unit(@result-num, @final-unit);
@result;
}
但要注意：这个函数只适用于「单单位」场景（如 px 或 em），不处理 calc(100% - 20px) 这类混合表达式——那得交给 CSS 运行时。
真正容易被忽略的是 calc 内部：Less 4.x 不解析 calc() 里的单位运算，所有计算必须在进入 calc() 前完成，且确保结果是合法 CSS 值（如 unit(100%, '') 会出错，因为 % 不是长度单位，不能用 unit() 提取数值）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
