<p>calc() 失效通常静默丢弃整条声明，首要检查 DevTools 中样式是否被划掉或 Computed 值是否回退；加减号两侧必须有空格，如 calc(100% - 20px) ✅，calc(100%-20px) ❌。</p>
calc() 失效几乎从不报错，浏览器直接静默丢弃整条声明——你看到布局不对，第一反应不该是“逻辑错了”，而是打开 DevTools 看那行样式是不是被划掉、Computed 值有没有 fallback。
加减号两侧有没有空格？
这是最常被忽略的语法铁律。+ 和 - 在 calc() 里是运算符，不是单位符号；缺一个空格，整条规则就被解析器当作非法 token 跳过。
-
calc(100% - 20px)✅ 正确（- 前后都有空格） -
calc(100%-20px)❌ 失效（紧贴写，所有旧引擎包括 Safari ≤15.3、Firefox -
calc(-50% + 10px)✅ 正确（负号属于数值，+ 前后仍需空格） -
calc(100%+20px)❌ 失效（+ 左侧缺空格）
变量值本身带单位了吗？包括 0
calc() 是类型敏感的：它需要每个操作数明确是长度、角度或频率。裸数字 0 或 20 没有量纲，浏览器无法推断该算成 0px 还是 0%，于是整个表达式作废。
-
--gap: 20px✅ 定义时带单位 →width: calc(100% - var(--gap))可用 -
--gap: 20❌ 缺单位 →var(--gap)展开为"20"，变成100% - 20，非法 -
--offset: 0px✅ 合法 -
--offset: 0❌ 类型无法推导，整条 calc() 被丢弃
Sass/Less 变量有没有显式插值？
预处理器变量是编译期概念，不插值就等于把 $gap 或 @gap 原样塞进 CSS，浏览器根本认不出那是数值。更糟的是，Sass 可能真把它当算术式提前计算，输出 calc(80%) 这种非法值。
立即学习“前端免费学习笔记（深入）”；
- Sass 正确：
width: calc(100% - #{$gap})，且$gap: 20px（含单位） - Less 正确：
width: calc(~"100% - @{gap}")，@gap: 20px - 绝对不要写：
calc(100% - $gap)或calc(100% - @gap)—— 编译后仍是字面量 - 复杂公式别堆在一行：
calc((100vw - 2 * @gutter - 3 * @item-width) / 3)易漏空格/单位，应拆解验证输出
父容器尺寸是否定义了？
100% 不是魔法值，它依赖父元素的明确尺寸。如果父级 height 是 auto 或压根没设，那 calc(100% - 60px) 实际算出来是 0 - 60px = -60px，浏览器直接忽略该声明。
- 验证方式：DevTools → Computed 标签页，看目标元素的
height是否为具体像素值 - 逐级检查：从
html→body→ 直接父容器，确认每层都有明确高度（如height: 100%或固定值） - 更健壮写法：
height: calc(100dvh - 80px)，避开地址栏抖动和百分比依赖链 - Flex/Grid 中若写了
flex: 1或grid-column: 1 / -1，会覆盖width计算，得显式加flex: none或min-width: 0
真正容易被忽略的是：空格缺失和单位缺失不会触发任何 warning，构建产物里残留未展开的 var() 或拼错的 calc() 也毫无提示——你得手动打开生成的 CSS 文件，逐字确认括号完整、空格正确、无多余引号。
