calc中运算符两侧必须加空格，否则解析器误判为非法token；Sass需用#{$var}插值、Less需用~"..."转义，避免预处理器错误计算；所有数值必须带单位（含0）。
calc 中的 CSS 变量本身不会“失效”，真正卡住的是解析器——它把没空格的表达式当成了非法 token，直接跳过整条声明。
calc 运算符两侧必须加空格（+ 和 - 尤其关键）
浏览器解析 calc() 时，+ 和 - 是歧义符号：可能是运算符，也可能是数值的正负号。没有空格，解析器优先按“负数单位”处理，比如 100%-20px 被拆成 100% 和 -20px，而 -20px 不是合法单位，整个表达式被丢弃。
-
calc(100% - 20px)✅ 正确：空格明确分隔操作数与运算符 -
calc(100% -20px)❌ 错误：-20px 被识别为带负号的单位，无效 -
calc(100%+20px)❌ 同样错误，+20px 会被当作“正号单位”解析失败 -
*和/虽然规范允许不加空格，但统一加空格可避免记忆负担和预处理器干扰
在 Sass/SCSS 中使用变量必须插值包裹
Sass 会提前对 calc(100vh - $height) 做算术运算，而不是原样输出给 CSS 解析器。一旦变量单位参与了 Sass 内部计算（比如 $height: 20px），Sass 可能把它转成纯数字或错误单位，导致最终生成的 CSS 语法非法。
-
calc(100vh - #{$height})✅ 正确：插值强制 Sass 原样输出变量值 -
calc(100vh - $height)❌ Sass 可能编译成calc(100vh - 20)或calc(80vh)，丢失单位 - 如果变量来自 map 或函数返回值，务必确认其输出含单位，否则需手动补上，如
#{$val}px
在 Less 中需用转义字符串避免预处理器劫持
Less 对 calc() 的处理更激进：它会把 100% - 50px 当作两个操作数做减法，结果变成 50% 并直接输出，完全绕过 CSS 的 calc 行为。
立即学习“前端免费学习笔记（深入）”；
-
calc(~"100% - 50px")✅ 正确：~""告诉 Less “别动这串，原样吐出去” -
calc(100% - 50px)❌ Less 编译后可能变成calc(50%)，失去动态性 - 变量同理：
calc(~"@{height} - 20px")，不能写calc(@height - 20px)
移动端和小程序里还要防单位混用和转义逃逸
小程序的 rpx 单位、某些 WebView 对 vw/vh 的支持偏差，会让 calc 在解析阶段就崩溃。更隐蔽的是构建工具（如 webpack 的 css-loader）可能二次转义引号或波浪号，导致 ~"..." 失效。
- 混用单位时优先验证基础组合：
calc(100vh - 20px)能生效，再试calc(100rpx - 20px) - 小程序中若
~"100vh - 20px"仍无效，尝试双层转义：calc(~"100vh - 20px")或检查是否被 postcss 插件过滤 - 所有数字参与 calc 时都必须带单位，
0也不行——写成0px、0rem，否则解析器无法推断类型
最常被忽略的一点：空格不是“看起来整齐”，而是 CSS 语法解析的硬分隔符；而预处理器里的变量，从来不是直接塞进 calc 的，它们需要显式脱敏才能活到浏览器执行那一刻。
