Less/Sass/PostCSS 中 calc() 易因变量未展开、除法误解析、嵌套 var() 不支持、空格缺失或单位缺失导致失效，需转义插值、原样透传、拆解变量、手动 fallback 并真机验证。
Less 编译时把 calc() 当普通表达式处理，变量不自动展开
Less 默认不会识别 calc() 的语义，而是把它当作一个待计算的数学节点。你写 height: calc(100vh - @header-height);，它不会替换 @header-height，最终输出仍是 calc(100vh - @header-height)——浏览器一看就报 Invalid property value。
常见错误现象包括：编译无报错但 CSS 输出含未解析变量、DevTools 里该属性灰掉、布局塌陷却找不到明显线索。
- 必须用
~""转义整个表达式，再用@{header-height}显式插值：height: ~"calc(100vh - @{header-height})"; - 所有参与运算的变量都得带单位（如
@header-height: 64px;），否则@{gap} * 2可能输出calc(100% - 32)，缺单位直接失效 - 避免混写：
calc(~"100% - @{offset}")✅，calc(~"100%" - @offset)❌（-被当 Less 运算符）
Sass 中 / 在 calc() 里被误判为除法运算符
Dart Sass 2.0 启用原生 CSS 解析后，calc(100% / 3) 本身合法，但如果你在 Sass 层写了类似 $width: 100% / 3;，就会触发 Sass 的除法逻辑，而单位混合除法不被允许，报错 Invalid CSS after "100%": expected expression。
这不是浏览器问题，是编译期解析冲突。Vue 单文件组件中 :deep() 内嵌 calc() 也容易在此阶段崩掉，因为 PostCSS 尚未介入，Sass 先报错了。
立即学习“前端免费学习笔记（深入）”；
-
calc()表达式必须原样透传，不要让它进 Sass 计算流程：width: calc(100% / 3);直接写，别套变量或函数 - 真要在 Sass 层做除法，必须用
@use "sass:math"+math.div(100%, 3)，且确保调用前已导入 - 在
::v-deep或:deep()里写calc()，注意语法格式：冒号数量、空格、括号匹配，少一个空格都可能让 Sass 提前报错
PostCSS 不处理 calc(var(--x))，旧浏览器整条规则静默丢弃
postcss-custom-properties 默认只替换顶层声明，对 calc(var(--gap)) 这类嵌套完全无感。更麻烦的是：IE11 和 Android 4.4 WebView 不是“var() 不生效”，而是整个 calc() 声明被 parser 直接跳过，连 fallback 都不走。
你看到 background: var(--primary, #007bff) 在 IE 里透明，不是回退失败，是那行 CSS 根本没进样式表。
- 避免在
calc()中直接引用变量；改用中间 CSS 变量拆解：--inner: calc(100% - 40px); width: calc(var(--inner) / 3); - 若必须动态，优先用
postcss-calc（在postcss-custom-properties之后运行），但它只适用于值固定、无运行时依赖的场景 - 手动 fallback 是最稳的：
width: 280px; width: calc(100% - 40px);，靠浏览器忽略不认识的值来兜底
移动端 WebKit 对空格极其敏感，少一个空格就整条失效
iOS Safari、微信 WebView 等基于 WebKit 的渲染器，会把 calc(100%-20px) 当作非法 token 处理，不是警告，是直接跳过整条 CSS 规则。你在 Chrome 里看着好好的，切到真机就发现元素宽度变成 auto。
这个坑特别隐蔽：空格缺失不会触发控制台报错，Computed 面板里对应属性直接消失，你得手动点开 Styles 面板，看那行是不是被划掉或标红。
-
+和-两侧必须各有一个英文空格：calc(100% - 20px)✅，calc(100% -20px)❌ -
0必须带单位：calc(0px + 100vw)✅，calc(0 + 100vw)❌（移动端大概率失效） - 变量插值后务必检查输出结果：用
.debug { content: "@{final-calc}"; }打印编译后字符串，确认空格、单位、括号全对
真正容易被忽略的是：这些错误在开发环境几乎不暴露——Chrome、新版 Safari、桌面端调试器太宽容。等你测到 iOS 15.3 真机或微信 6.5.22 之前版本，布局已经偏了两天，还查不到源头。
