CSS中calc()内var(--x)报invalid value，90%因变量缺单位；减号前后须空格；预处理器变量需显式插值；父容器尺寸未定义时100%为0。
calc()里var(--x)加减运算报invalid value，90%是变量值没带单位
浏览器解析calc()时不做类型推断：如果--x: 20，那var(--x)展开就是纯字符串"20"，参与100% - var(--x)就变成100% - 20——这不是“算错”，而是语法非法，整条CSS声明被静默丢弃。DevTools里该属性会显示为划掉的灰色，控制台也不报错。
必须让变量自带量纲，哪怕只是0：
-
--gap: 20px✅ 后续calc(100% - var(--gap))能正常解析 -
--offset: 0❌ 比非零值更危险，0无单位=无类型，浏览器拒绝推断 -
--offset: 0px✅ 或0rem、0%都行，但不能省
加减号两侧缺空格会让整个calc()在Firefox和移动端消失
Firefox（包括142）和多数安卓 WebView 对calc()采用零宽容语法策略：100%-20px会被拆成100%和-20px，而-20px不是合法单位，整条规则直接跳过。你不会看到报错，只会发现样式没生效。
正确写法必须保留英文空格：
立即学习“前端免费学习笔记（深入）”；
-
calc(100% - 20px)✅ 减号前后各一个空格 -
calc(-50% + 10px)✅ 负号属于数值本身，+前后仍需空格 -
calc(100vh-30px)❌ 即使是vh单位，缺空格照样挂
Sass/Less变量不插值或单位缺失，编译后照样失效
预处理器在构建阶段就处理变量，不显式插值就等于把$gap或@gap原样塞进CSS，浏览器根本认不出那是数值。更糟的是，Sass可能提前把它当算术式计算，输出calc(80%)这种非法值。
正确做法：
- Sass：
$gap: 20px;+width: calc(100% - #{$gap}); - Less：
@gap: 20px;+width: calc(~"100% - @{gap}"); - 绝对不要写
calc(100% - $gap)或calc(100% - @gap)——编译后仍是字面量
父容器尺寸未定义，100%就等于0，calc白算
100%不是魔法值，它依赖父元素的明确尺寸。如果父级height是auto或压根没设，那calc(100% - 60px)实际算出的是0 - 60px = -60px，浏览器直接忽略该声明。
常见翻车点：
- Flex容器子项用
height: calc(100% - 40px)，但父容器没设height或min-height - 绝对定位元素的
top/bottom用calc(100% - 20px)，但父容器高度由内容撑开 - 媒体查询切换后，父容器尺寸变了，但子元素
calc()没重算（其实会重算，前提是父容器尺寸确实变化了）
真正容易被忽略的是：这些错误全都不报错。你以为它“算错了”，其实它根本没开始算——连解析这一步都没过。
