calc()中直接写$var会静默失效，必须用#{$var}插值且变量需带单位（如20px），加减号两侧还须保留空格，否则浏览器因语法非法直接忽略整条声明。
calc()里直接写$var会静默失效
浏览器根本不会看到$var——那是 Sass 编译期的符号，CSS 运行时它早该消失了。不插值就写calc(100vh - $navbarHeight)，Sass 可能原样输出，也可能擅自算成calc(80vh)或calc(100vh - 20)，后者单位丢失，整条声明被丢弃。
必须用#{$navbarHeight}强制插值，且$navbarHeight本身得带单位（如20px），不能是20这种裸数字。
-
$navbarHeight: 20px✅ 插值后得calc(100vh - 20px) -
$navbarHeight: 20❌ 插值后是calc(100vh - 20)，无单位，无效 -
calc(100vh - $navbarHeight)❌ 绝对别这么写，编译阶段就失控
加减号两侧没空格，calc()直接被忽略
浏览器解析calc()时，+和-是歧义符号：可能是运算符，也可能是数值正负号。没空格，它就把-20px当“负单位”处理，而-20px不是合法单位，整条规则静默跳过，控制台还不报错。
插值时最容易漏掉空格，比如calc(100% -#{$gap})少了个空格，输出就是calc(100% -20px)，失效。
-
calc(100% - #{$gap})✅ 显式空格，安全 -
calc(100%-#{$gap})❌ 输出calc(100%-20px)，浏览器无视 - 乘除号
*//虽规范允许不加空格，但统一加更稳：calc(#{$w} * 2)
Sass变量参与乘除时单位必须合法
calc()内部乘除有硬约束：左侧可带单位，右侧必须是纯数字；反过来就语法错误。Sass 层若提前计算，还可能把单位搞混。
比如$base: 20px; calc($base * 2)没问题，但calc($base * 2px)会报错——Sass 不支持单位×单位。
-
calc(var(--width) * 2)✅ 前提是--width: 200px -
calc(var(--width) * 2px)❌ 右侧带单位，非法 -
height: calc(100vh / #{$rows})✅ 要求$rows: 4（纯数字） -
$rows: 4px❌ 除数带单位，运行时报错
小程序或旧 WebView 中calc()容易被截断
某些小程序构建工具（如 webpack 的css-loader）会对引号、波浪号二次转义，导致~"100vh - #{$gap}"失效；部分安卓 WebView 对rpx或vh支持不全，calc(100rpx - 20px)可能在解析阶段就崩溃。
验证顺序很重要：先确认calc(100vh - 20px)能生效，再试混单位；若calc(~"100vh - #{$gap}")仍不行，检查是否被 postcss 插件过滤，或尝试双层转义。
- 优先用同单位组合，避免
rem + px混用 - 移动端慎用大量
calc()做动画，重排开销高 - 复用变量时，改一处定义，必须同步检查所有
calc()引用点的空格、单位、插值三重合规性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
