<p>var(--x) 在 calc() 中乘以 1px 能“复活”是因为它将无单位数字强制转为带单位长度值，使 calc() 可进行后续运算；如 --size: 24 → calc(var(--size) * 1px) 得 24px。</p>
为什么 var(--x) 在 calc() 里乘以 1px 就能“复活”
因为 var(--x) 返回的是原始字符串值，如果定义为 --x: 20，那它展开就是 "20" —— 纯数字、无单位、无量纲。CSS 不允许拿一个裸数字直接参与长度运算（比如加 10px），但允许它乘以一个带单位的值：20 * 1px 合法，结果是 20px；而 20 + 10px 非法，浏览器直接丢弃整条声明。
乘以 1px（或 1rem、1em、1%）本质是“类型升格”：把无单位数字强制转成对应单位的长度值，让 calc() 能继续后续加减。
-
--size: 24→width: calc(var(--size) * 1px)✅ 输出24px -
--scale: 1.5→font-size: calc(1rem * var(--scale))✅ 输出1.5rem（注意顺序：带单位在左，纯数字在右） - 别写
calc(1px * var(--size))—— 虽然多数现代浏览器也认，但 Safari 15.4 之前会静默失败
哪些单位可以安全用来“补单位”
不是所有单位都等效。关键看目标用途和兼容性：
- 想得到像素值？用
1px最稳妥，不依赖根字体或父元素 - 想保持响应式缩放能力？用
1rem，但前提是--base-font-size是纯数字（如--base-font-size: 16），再配合calc(var(--val) / var(--base-font-size) * 1rem) - 避免用
1em或100%做升格：前者随父元素 font-size 变化，后者语义模糊（是相对于容器宽？高？），容易引发意外缩放 -
0必须显式写成0px/0rem—— 单独一个0是唯一“看起来不用单位却最危险”的值，calc() 无法推断其量纲
乘法升格后还能不能继续加减其他单位
可以，但必须确保操作数之间单位可兼容。升格后的值已具备明确量纲，calc() 就能做类型检查了：
立即学习“前端免费学习笔记（深入）”；
-
calc(var(--gap) * 1px + 4px)✅--gap: 8→8px + 4px = 12px -
calc(var(--gap) * 1rem + 0.5rem)✅--gap: 2→2rem + 0.5rem = 2.5rem -
calc(var(--gap) * 1px + 1rem)⚠️ 现代浏览器支持，但 IE11 和部分安卓 WebView 会整条丢弃，慎用 - 别写
calc((var(--a) * 1px) + (var(--b) * 1rem))—— 混合单位加法在旧环境风险高，优先统一单位再算
预处理器里用乘法升格要额外注意插值
Sass/Less 编译时不会运行 calc()，所以变量必须在编译阶段就完成拼接，否则浏览器收到的是未解析的字符串。
- Sass 错误：
width: calc(#{$gap} * 1px)，若$gap: 20（无单位），结果是calc(20 * 1px)✅；但若$gap: 20px，结果是calc(20px * 1px)❌（单位相乘非法） - Sass 推荐：
$gap: 20; width: calc(#{$gap} * 1px)，保证左侧是纯数字 - Less 正确：
@gap: 20; width: calc(~"@{gap} * 1px");（波浪号强制转义，避免被当普通文本） - 绝对不要写
calc($gap * 1px)或calc(@gap * 1px)—— 编译后仍是字面量，浏览器看到的是无效 token
真正容易被忽略的是：你改了一个变量的定义（比如从 --gap: 20px 改成 --gap: 20），却没同步检查所有用到它的 calc() 表达式是否还满足“左侧带单位、右侧纯数字”这个硬约束——尤其当这个变量被多个组件、多个主题复用时，一处漏掉，整块布局就静默失效。
