如何解决CSS calc()内部嵌套变量在老版本编译中的语法错误？-css教程-PHP中文网

less/sass/postcss 中 calc() 易因变量未展开、除法误解析、嵌套 var() 不支持、空格缺失或单位缺失导致失效，需转义插值、原样透传、拆解变量、手动 fallback 并真机验证。

如何解决css calc()内部嵌套变量在老版本编译中的语法错误？

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 都不走。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

你看到 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);，靠浏览器忽略不认识的值来兜底