calc()中css变量失效主因是变量值缺单位或单位不匹配，如--gap:20会导致calc(100%-var(--gap))静默丢弃；必须定义为--gap:20px等带单位值，或用css.registerproperty()声明类型。
calc() 里直接用 CSS 变量会报错或失效
因为 calc() 不会自动解析自定义属性（--my-var）的值类型，如果变量值没带单位（比如 --gap: 10），或单位与参与运算的其他值不匹配（比如 --gap: 10px 和 1fr 混用），calc() 就会直接丢弃整个表达式，回退到初始值或无效状态。
常见错误现象：calc(100% - var(--gap)) 在 --gap: 20 时完全不生效；Chrome 控制台可能显示 Invalid property value，但不报红；Firefox 有时静默失败。
- 必须确保
var(--gap)的值本身是合法的、带单位的尺寸（如20px、1em），不能是纯数字 - 避免在同一个
calc()中混用无法相加的单位，例如var(--gap) + 1fr——fr是比例单位，不能和px直接加减 - 如果变量需要动态拼单位，得靠 JS 注入（CSS 本身不支持字符串拼接），或者改用
clamp()/ 媒体查询分段控制
用 env() 或 theme() 替代部分场景更安全
如果你其实想用的是系统级间距（比如安全区、导航栏高度），别硬套 var()，直接上 env(safe-area-inset-top)。它原生支持单位，且被 calc() 完全兼容。
示例：padding-top: calc(env(safe-area-inset-top) + 12px); —— 这种写法稳定，无需预设变量，也不怕单位缺失。
-
env()值始终带单位，calc()能直接参与运算 - CSS 主题函数（如
theme(spacing.4)）目前仅 Safari 技术预览版支持，生产环境慎用 - 若需跨平台一致行为，优先用
env()处理安全区，其余仍走var()+ 显式单位校验
JS 动态注入带单位的变量值最可控
当设计系统要求变量可全局调整（比如主题切换时修改所有 --gap），又不想手动维护每个变量都写单位，就得让 JS 来兜底。
实操建议：在根元素上设置变量时，强制补单位；或用 CSS.registerProperty() 声明类型（仅 Chrome/Edge 支持）：
CSS.registerProperty({
name: '--gap',
syntax: '<length>',
inherits: false,
initialValue: '0px'
});</length>
- 注册后，
calc(100% - var(--gap))才真正能被浏览器当作长度计算 - 未注册时，即使你写了
--gap: 12px，某些旧版 Safari 仍可能拒绝参与calc() - 注册需在 CSSOM 加载前执行（比如
里 inline script），否则无效
调试时用 getComputedStyle 看真实解析值
别只信 DevTools 里看到的 --gap 值 —— 它显示的是原始字符串，不是 calc() 实际拿到的值。真要确认，得查计算后的结果：
getComputedStyle(document.documentElement).getPropertyValue('--gap') // 返回 '12px' 或 'invalid'
- 返回空字符串或
' '（空格），说明变量未定义或被覆盖 - 返回无单位数字（如
'12'），就是根本问题所在：这个值进不了calc() - 配合
window.matchMedia检查媒体查询是否意外覆盖了变量定义位置
最常被忽略的一点：CSS 变量作用域是继承的，但 calc() 计算发生在声明处，不是使用处。所以父元素设的 --gap，子元素 calc() 能用；但如果子元素自己重设了 --gap: 0，那它自己的 calc() 就用这个 0 —— 很多“变量突变”问题其实出在这里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
