SCSS中calc()失效主因是空格缺失、单位缺失及变量插值错误：calc(100%-20px)因无空格被浏览器静默丢弃；--gap:20（缺px）导致var(--gap)展开后类型非法；Sass变量插值需用#{$gap}且定义时带单位，否则生成无效CSS。
SCSS里直接写calc()但单位混用失效？先看空格和单位规则
SCSS本身不解析calc()，它只是把字符串原样输出到CSS。所以你在SCSS里写的calc(100% - 20px)能否生效，完全取决于最终生成的CSS是否符合浏览器对calc()的语法要求。最常踩的坑是：编辑器自动删空格、Sass变量插值后拼出calc(100%-20px)（缺空格）、或写了calc(1rem - 10)（10没单位）。这些都会让整条声明被静默丢弃，DevTools里该属性会显示为划掉的灰色。
用Sass变量参与calc()计算时，为什么不能直接乘除var(--x)？
因为var(--x)在Sass编译期只是字符串，比如var(--gap)会被当作文本原样输出，Sass不会拆开它去读值、判单位、做运算。你写width: var(--gap) * 2会直接报错；写width: calc(var(--gap) * 2)则要看--gap存的是什么：
- 如果
--gap: 12px，那calc(12px * 2)非法（乘法两边都带单位） - 如果
--gap: 12（纯数字），那calc(12 * 2)合法，但结果是24——没单位，CSS不认 - 安全做法是统一存纯数字，再用
1px补单位：width: calc(var(--gap) * 1px)
SCSS插值拼接calc()时，/和*容易引发什么意外？
Sass看到/会尝试做除法，除非你明确告诉它这是字符串。比如你本想输出line-height: 1.5 / 16px，但写成line-height: #{$ratio} / #{$base}，Sass可能真去算1.5 / 16，结果是0.09375，然后拼成line-height: 0.09375px——完全不是你要的。
正确做法：
立即学习“前端免费学习笔记（深入）”；
- 用
#{}包裹整个表达式：width: calc(#{($w / $h)} * 1px) - 乘除运算中确保只有一个操作数带单位，例如
calc(#{($size)}px * 1.2)比calc(var(--size) * 1.2)更可控 - 避免在
grid-template-columns这类复杂属性里嵌套插值，旧版Safari对calc()支持不稳定
为什么加了fallback还是calc()不生效？
写了width: calc(100% - var(--sidebar-width, 240px))却没反应，常见原因有三个：
-
--sidebar-width定义在:root外，当前作用域查不到，fallback也未触发（某些浏览器会跳过整个calc()） - 变量值是
auto、inherit或空字符串，这些都不是合法长度值，导致整条calc()被丢弃 - 父容器本身没有可计算的
width上下文，比如display: inline、浮动未清除，或Flex/Grid项被flex-grow覆盖
真正关键的检查点是：打开DevTools → Styles面板 → 找到那行calc() → 看它是不是蓝色（已解析）还是灰色划掉（已丢弃）。不是所有“看起来写了”就等于“真的进了渲染流程”。
