calc() 失效主因是空格缺失、单位缺失、父容器无高度及预处理器未插值，导致声明被静默丢弃而非报错。
calc() 运算符两侧缺空格导致整条声明被静默丢弃
浏览器（尤其是旧版 WebKit：iOS Safari ≤15.3、Android 4.4 WebView）会把 calc(100%-20px) 当作非法 token 直接跳过，DevTools 里该属性灰掉、Computed 值保持初始值——连 warning 都没有。
这不是兼容性问题，是语法错误。+ 和 - 必须带空格；* 和 / 虽然语法允许无空格，但统一加空格可避免记忆混淆和预处理器干扰。
-
calc(100% - 20px)✅ 正确 -
calc(100%-20px)❌ 失效（紧贴写） -
calc(-50% + 10px)✅ 负号属于数值，+ 前后仍需空格 - Sass/Less 中拼接易被自动 trim 空格，必须用插值：
calc(100% - #{$gap})（Sass）、calc(~"100% - @{gap}")（Less）
var() 未包裹或变量定义缺失单位
--gap: 20 和 --gap: 20px 看似只差两个字母，但前者会让 calc(100% - var(--gap)) 变成 calc(100% - 20)，单位缺失 → 类型不匹配 → 整条 calc 被丢弃。
var(--x) 返回的是原始字符串，不是“带单位的数”，单位必须焊死在自定义属性定义里。
-
--gap: 20px✅ 定义时带单位 -
width: calc(100% - var(--gap))✅ 必须用var()包裹 -
width: calc(100% - --gap)❌ 浏览器不认识裸名--gap -
--offset: 0❌ 危险！必须写成--offset: 0px或--offset: 0rem
父容器尺寸未设导致百分比失去基准
calc(100% - 60px) 在父元素 height: auto 或未声明高度时，100% 解析为 0，结果是 -60px，浏览器直接忽略该声明。
常见于 Vue/React 组件嵌套场景：子组件设了 height: calc(100vh - 80px)，但它的直接父容器没设 height: 100%，导致高度塌陷。
- 验证方式：打开 DevTools → Computed 标签页，看目标元素的
height是否为具体像素值 - 逐级检查：从
html→body→ 直接父容器，确认每层都有明确高度（如height: 100%或固定值） - 更健壮写法：
height: calc(100dvh - 80px)，避开地址栏抖动和百分比依赖链
预处理器（Sass/Less）与 calc() 的生命周期冲突
Sass 变量 $gap 和 Less 变量 @gap 是编译期概念，而 calc() 是运行时 CSS 函数。不显式插值，变量就卡在源码里出不来。
低版本 Less 更危险：它会把 calc(100% - 50px) 当作算术表达式执行，编译成 calc(50%) —— 表面生效，实则逻辑错乱。
- Sass 正确写法：
width: calc(100% - #{$gap})，且$gap: 20px（含单位） - Less 正确写法：
width: calc(~"100% - @{gap}")，比calc(100% - @{gap})更稳妥 - 绝对不要写
calc(100% - $gap)或calc(100% - @gap)—— 编译后仍是字面量 - PostCSS 不会自动展开
calc(var(--x) * 2)，postcss-custom-properties默认只处理顶层var()
真正容易被忽略的是：calc() 失效往往不是“不支持”，而是被静默丢弃。它不报错、不警告，只悄悄退场。查问题时别只盯着浏览器兼容表，先看 DevTools 里那条声明是不是灰的，再顺藤摸瓜查空格、单位、父容器、预处理器插值——四者占其一，就足以让 calc 彻底失联。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
