为什么CSS变量在Firefox 142里calc()结果异常？

Firefox 142 对 calc() 采用零宽容语法策略，加减号缺空格、CSS变量无单位、嵌套calc()或乘除右侧带单位均导致整条声明被静默丢弃，DevTools中不显示且无报错。

Firefox 142（假设为未来版本，实际截至2026年8月最新稳定版为Firefox 141）对 calc() 的解析没有新增异常行为——你看到的“结果异常”，几乎可以确定是表达式本身在 Firefox 严格模式下被静默丢弃，而非计算错误。

Firefox 从最早支持 calc() 起就坚持零宽容语法策略：只要加减号缺空格、变量值无单位、嵌套 calc() 或乘除右侧带单位，整条 CSS 声明就会被跳过，DevTools 的 computed 面板里压根不显示该属性，看起来就像“没生效”或“结果为 0”。

加减号两侧缺空格 → 整条规则消失

这是 Firefox 下最常触发“异常”的原因。它不会尝试补全，也不会报错，直接忽略。

1. width: calc(100% - 20px) ✅ 所有浏览器都认
2. width: calc(100%-20px) ❌ Firefox 142 直接跳过，computed 中 width 为空或回退到初始值
3. Sass/Less 中写 calc(100% - #{$gap}) 但 $gap: 20px 没问题；若写成 calc(100% -#{$gap})（减号后紧贴变量），编译后变成 calc(100% -20px) → 失效

CSS 变量值没带单位 → var(--x) 展开后类型非法

Firefox 对类型推导极严格：calc(100% - var(--gap)) 中，如果 --gap: 20（无单位），展开后是 100% - 20 —— 浏览器无法判断 20 是 px、rem 还是 %，整条声明作废。

1. ✅ 正确：--gap: 20px → calc(100% - var(--gap)) 解析为 100% - 20px
2. ❌ 错误：--gap: 20 或 --offset: 0 → 即使是 0，也必须写 0px 或 0rem
3. 注意：0 比非零值更危险，因为部分工具会自动省略“冗余单位”，结果在 Firefox 里彻底失联

嵌套 calc() 或乘除右侧带单位 → 语法硬性拒绝

Firefox 142 仍遵循 CSS Values & Units Level 4 规范，对乘除和嵌套执行字面级校验：

1. height: calc(calc(100% - 20px) / 2) ❌ Safari 15.4 前不支持，Firefox 全系（包括 142）也静默丢弃
2. font-size: calc(var(--base) * 2px) ❌ 右侧 2px 带单位，违反“乘除右操作数必须为纯数字”规则
3. ✅ 替代写法：--base: 200px + font-size: calc(var(--base) * 1.2)（1.2 是纯数字）

真正容易被忽略的是：Firefox 不会给你任何提示。你以为它“算错了”，其实它根本没开始算——连解析这一步都没过。验证方式很简单：打开 DevTools → Elements → 找到对应元素 → 看 Styles 面板里那条 calc() 是否被划掉（strikethrough），或者直接在 Computed 里搜 width/height 等属性，看有没有值。没有，就是语法没过；有，再查单位和父容器尺寸。