less中unit()函数不能直接转换css变量值，因其为编译期函数，而css变量在运行时才生效；正确做法是用less变量做换算，css变量仅存纯数字作运行时覆盖入口。
Less中unit()函数不能直接转换CSS变量的值
因为unit()是Less编译期函数，而CSS变量（--size: 20px）在运行时才生效，Less根本“看不到”它的值。你写unit(@{--size}, rem)会报错或返回空——这不是语法问题，而是阶段错位。
常见错误现象：Property parse error: Expected a number but found '--size'，或者编译后生成无效CSS如font-size: var(--size)rem;。
- 所有含
var(--xxx)的表达式必须留在CSS层，不能参与Less数学运算 -
unit()只接受已知数值（如@base: 16px），且要求输入带单位、输出指定单位 - 若强行用
~"calc(var(--size) / 16 * 1rem)"，虽能绕过编译错误，但失去类型安全和可维护性
正确做法：用Less变量做单位换算，CSS变量仅作运行时覆盖入口
把单位换算逻辑放在Less里，CSS变量只用来提供“原始数值”，不带单位。例如定义--font-size-base: 16（纯数字），再由Less加单位、转换单位。
示例：
@base: 16;
:root {
--font-size-base: @{base};
}
.text {
font-size: unit(@base, px); // 编译为 16px
font-size: unit(@base / 16, rem); // 编译为 1rem
}
- 确保CSS变量只存数字（无单位），避免
var(--size)被当字符串拼接 - 如果必须动态响应CSS变量变化（如主题切换），只能用JS读取
getComputedStyle+calc()组合，Less无法介入 - 多个单位需求（px/rem/em）建议封装为mixin：
.to-rem(@val) { font-size: unit(@val / @base, rem); }
为什么unit(20px, rem)结果是1.25rem而不是20rem
unit()不是字符串替换，它先提取数值部分（20），再除以基准（默认16px=1rem），最后拼上目标单位。所以unit(20px, rem)等价于(20 / 16)rem = 1.25rem。
- 显式指定基准：用
unit(20px, rem, 10px)表示10px=1rem，则结果为2rem - 省略第三个参数时，Less默认按16px=1rem换算，与浏览器默认根字体大小一致
- 若输入值无单位（如
unit(20, rem)），Less会警告并返回原值20rem——这通常不是你想要的
像素转rem时，unit()和除法写法的区别
unit(20px, rem)和(20px / 16px) * 1rem视觉结果一样，但底层行为不同：前者是Less内置单位解析，后者是数学运算。
-
unit()更语义化，适合明确“转换单位”的意图；除法写法更灵活（比如要除以动态变量@r） - 当
@base是计算结果（如@base: round(16.3)）时，除法能保留精度，unit()可能因内部舍入产生微小偏差 - 兼容性无差别，两者都在编译期完成，输出纯CSS
真正容易被忽略的是：无论选哪种，都得确保所有参与运算的值在Less编译时完全确定——CSS变量永远不在这个范围内。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
