<p>var(--x) * 1px 能将纯数字转为像素值，因 var(--x) 返回无单位字符串，乘法触发类型强制转换，使结果获得右侧单位量纲；乘除右侧不可带单位，空格不可省略，0需显式写单位。</p>
无单位变量必须进 calc() 才能参与单位运算，且乘除右侧必须是无单位数；var(--x) * 1px 是最常用、最稳妥的“升格”方式，但顺序不能错。
为什么 var(--x) * 1px 能把纯数字转成像素值
因为 var(--x) 返回的是原始字符串——如果定义为 --x: 24，展开后就是 "24"，纯数字、无单位、无量纲。CSS 不允许 24 + 10px，但允许 24 * 1px，浏览器会将结果解释为 24px。
这不是语法糖，是类型强制转换：乘法让无单位数“获得”右侧单位的量纲。
-
--size: 24→width: calc(var(--size) * 1px)✅ 输出24px -
--size: 24px→width: calc(var(--size) * 2)✅ 输出48px -
--size: 24→width: calc(var(--size) * 2px)❌ 乘除右侧不能带单位，整条声明失效 -
--size: 24px→width: calc(var(--size) * 1px)❌24px * 1px是非法面积单位，被忽略
calc() 里乘除的单位规则必须死记
乘除不是“两边随便填”，浏览器有硬性校验：
立即学习“前端免费学习笔记（深入）”；
- 乘法：
*左右至少一侧必须是无单位数字（如2、1.5、var(--scale)），另一侧可带单位 - 除法：
/右侧（除数）必须是无单位数字，左侧可带单位（如calc(100% / 3)✅，calc(100% / 3px)❌） - 空格是语法组成部分：
calc(var(--x)*1px)会被当作文本字面量丢弃，必须写成calc(var(--x) * 1px) -
1px * var(--x)在 Safari 15.4 之前静默失败，务必把var(--x)放左边
0 必须显式写成 0px 或 0rem
0 是唯一看起来“不用单位也合理”的值，但它在 calc() 中会被当作无量纲数，导致类型推断失败。
-
--gap: 0→margin: calc(var(--gap) * 1px + 4px)❌ 可能解析为0 + 4px，部分浏览器报错或回退默认值 -
--gap: 0px→margin: calc(var(--gap) + 4px)✅ 明确长度，安全加减 - 更稳妥写法：
--gap: 0→margin: calc(var(--gap) * 1px + 4px)✅ 因为0 * 1px = 0px，结果有明确单位
想换 rem？别只靠 1rem 升格
用 var(--x) * 1rem 得到的是固定倍数的 rem，但真要响应式缩放（比如适配根字号变化），得配合除法基准：
- 设
--base-font-size: 16（纯数字，对应html { font-size: 16px }） - 设
--space-m: 24（纯数字，代表 24px 基准） - 用
padding: calc(var(--space-m) / var(--base-font-size) * 1rem)✅ 输出1.5rem，根字号变时自动重算 - 若
--base-font-size写成16px，calc(24 / 16px * 1rem)❌ 除数带单位，整条失效
真正容易被忽略的，是单位一致性不靠经验判断，而由浏览器运行时验证——看似在 Chrome 里跑通了，不代表在微信 WebView 或旧版安卓上不会整条规则静默丢弃。
