var(--x)在calc()中加减失效，因无单位变量导致量纲不明，浏览器无法判断结果类型而静默丢弃；必须让--x自带单位（如20px、0px）或用乘法升格（如var(--x)*1rem）。
calc() 里 var(--x) 报错或静默失效，根本不是浏览器兼容性问题，而是变量值类型不合法——--x 必须带单位（含 0），或在 calc() 内用乘法“升格”为带单位数值。
为什么 var(--x) 在 calc() 中直接参与加减会报 invalid value
浏览器无法推断两个无单位变量相加的结果该是什么类型：var(--a) + var(--b) 中，如果 --a: 10、--b: 20，那结果是 30px？30%？还是 30em？解析器拒绝猜测，整条声明被丢弃。
-
--gap: 20→width: calc(100% - var(--gap))❌ 失效（var(--gap)展开为"20"，变成100% - 20，无单位） -
--gap: 20px→width: calc(100% - var(--gap))✅ 正确（var(--gap)展开为"20px"） -
--base: 2→font-size: calc(var(--base) * 1rem)✅ 用* 1rem显式赋予单位
0 必须写成 0px / 0rem / 0%，不能只写 0
0 是唯一看起来“不用单位”的数字，但它在 calc() 中反而最危险——它没有量纲，浏览器连是否参与长度计算都无法判断。
-
--offset: 0→left: calc(var(--offset) + 10px)❌ 静默失效 -
--offset: 0px→left: calc(var(--offset) + 10px)✅ -
--min: 0→width: clamp(var(--min) * 1px, 50%, 100%)✅ 补单位后可进clamp()
乘除运算对变量单位有硬性要求
calc() 的乘除不是“任意混算”，右侧操作数必须是纯数字（无单位），左侧可以是带单位值；反过来就非法。
-
width: calc(var(--width) * 2)✅ 前提是--width: 200px -
width: calc(var(--width) * 2px)❌ 右侧带单位，语法错误 -
height: calc(100vh / var(--rows))✅--rows: 4（纯数字）才合法 -
height: calc(100vh / var(--rows))❌ 若--rows: 4px，除数带单位，直接报错
预处理器中变量未插值会导致单位丢失
Sass/Less 编译阶段若没显式插值，$gap 或 @gap 就只是字符串占位符，不会变成 CSS 可识别的值，最终生成的 calc() 里可能只剩裸数字。
- Sass 错误：
width: calc(100% - $gap)→ 可能编译成calc(100% - 20) - Sass 正确：
width: calc(100% - #{$gap})（且$gap: 20px） - Less 错误：
width: calc(100% - @gap) - Less 正确：
width: calc(~"100% - @{gap}")（双引号+波浪号强制转义）
真正容易被忽略的是：你改了变量定义，却忘了检查所有引用它的 calc() 是否仍满足空格、单位、插值三重约束——尤其当变量被多个组件复用时，一处漏掉，全链路失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
