CSS变量在calc()中必须用var()包裹且带单位，否则因语法错误被静默丢弃；预处理器变量需插值；小程序中calc()易被截断，需转义并避免跨单位混用；空格是calc()语法必需。
CSS变量在calc()中直接使用会失效，根本原因不是浏览器不支持，而是变量未被正确解析为可计算值——必须用var()函数包裹，且单位不能缺失或错位。
为什么calc(100% - $gap)或calc(100% - --gap)完全不生效
前者是 Sass 变量写法，后者是把 CSS 自定义属性名当普通标识符用了。CSS 引擎根本不会识别--gap这个裸名，它既不是数值也不是单位，整个calc()表达式因语法错误被丢弃（不是报错，是静默跳过）。
-
calc(100% - $gap)：Sass 编译时若未插值，会原样输出，浏览器看到的是无效 token -
calc(100% - --gap)：缺少var()调用，--gap 不会被替换，CSS 解析器按未知标识符处理 - 即使写了
var(--gap)，如果--gap本身没带单位（如--gap: 20），calc()里参与运算就会类型不匹配，直接失败
SCSS/Less 中用变量参与calc()必须插值
Sass 和 Less 是预处理器，它们的变量在编译阶段就该展开；但calc()是运行时 CSS 函数，两者生命周期不同。不显式插值，变量就卡在源码里出不来。
- SCSS 正确写法：
width: calc(100% - #{$gap});（$gap需含单位，如$gap: 20px） - Less 正确写法：
width: calc(100% - @{gap});或更稳妥的width: calc(~"100% - @{gap}"); - 绝对不要写
calc(100% - $gap)或calc(100% - @gap)—— 这些在编译后仍是字面量，浏览器无法计算
CSS 自定义属性 + var() 的单位必须显式携带
var(--gap)返回的是声明值的**原始字符串**，不是“带单位的数值”。如果--gap: 20，那var(--gap)就是"20"，和px拼一起就是"20px"，但calc(100% - var(--gap))实际变成calc(100% - 20)，单位缺失导致非法。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确声明：
--gap: 20px;或--gap: 1rem; - ✅ 正确使用：
padding: calc(1rem + var(--gap)); - ❌ 错误示范：
--gap: 20;+calc(1rem + var(--gap))→calc(1rem + 20)，浏览器拒绝解析 - ⚠️ 注意：IE 不支持 CSS 自定义属性，所以这套方案天然放弃 IE 兼容性
移动端小程序里calc()被截断或简化怎么办
微信、支付宝等小程序的样式引擎（尤其旧版 WebView）会对calc()做预处理，遇到rpx或%混用时可能直接砍掉表达式后半段，比如calc(100% - 30rpx)变成calc(70%)。
- 小程序专用解法：用
~"..."强制转义，如height: calc(~"100vh - 30rpx"); - 确保
rpx只跟rpx运算，避免calc(100vw - 30rpx)这种跨单位组合（vw/rpx 混用在多数小程序环境不可靠） - 真机测试比模拟器更关键——部分安卓低端机 WebView 对空格、引号、括号嵌套极其敏感
最易被忽略的一点：calc()里的空格不是可选格式建议，而是语法分词必需。少一个空格，整个表达式就从“数学运算”降级为“非法值”，浏览器连 fallback 都不触发——它根本不会进入层叠流程。写完务必检查每个+、-两侧是否都有空格，别信编辑器自动补全。
