SCSS中calc()不生效主因是变量未用#{}插值包裹，导致Sass提前运算而非浏览器运行时计算；需确保空格、单位、父容器高度均正确。
SCSS 里 calc() 不生效，90% 是因为变量没用 #{} 插值包裹，导致 Sass 在编译阶段就错误计算或直接丢弃。
为什么 calc(100% - $gap) 编译后变成 calc(80%) 或直接消失
Sass 把 $gap 当作它自己的数值参与了算术运算，而不是留给浏览器运行时解析。比如 $gap: 20px，Sass 可能直接算出 100% - 20px = 80%（单位被强制转换），生成非法 CSS；更糟的是，某些版本会因类型不匹配静默跳过整条声明。
-
$gap: 20px必须写成calc(100% - #{$gap})，让 Sass 原样输出calc(100% - 20px) - 如果变量是计算结果（如
$total: $header + $footer），确保每一步都带单位：$header: 60px; $footer: 40px;，否则$header + $footer可能拼出60px40 - 不要在
#{}外做减法：calc(100vh - $header - $footer)❌，应提前合并：$offset: #{$header + $footer}; calc(100vh - #{$offset})✅
calc() 里混用除号 / 时，#{} 还能防误解析
SCSS 看到 / 会优先当作除法运算符，尤其当左右都是数字时（如 $base: 16px; calc($base / 2)），它真会算出 8px 并塞进 CSS —— 但你本意可能是想生成 font: 16px/24px 这种斜杠分隔语法。
- 写字体行高：
font: #{$font-size}/#{$line-height};→ 输出font: 16px/24px; - 写
grid-gap类表达式：gap: #{$col-gap}/#{$row-gap};（注意：这不是标准 CSSgap语法，仅作字符串拼接示例） - 绝对不要依赖 Sass 自动识别上下文：它不会判断你写的是
calc(100% / 2)还是font: 16px/24px，/永远优先按运算符处理
空格、单位、父容器三者不配合，#{} 也救不了
插值只解决“变量能不能出来”，不解决“出来后能不能算对”。以下问题即使用了 #{$gap} 依然白搭：
-
calc(100% - 20px)缺少空格 → 写成calc(100%-20px)，浏览器直接忽略整条声明 -
0出现在calc()里必须带单位：calc(0px + 100vh)✅，calc(0 + 100vh)❌（后者整个声明失效） - 父容器高度为
auto，子元素写height: calc(100% - 60px)→ 百分比基准为 0，结果恒为负值，浏览器丢弃 - 混合使用时最危险：
calc(100vh - #{$gap})中，$gap是20（无单位）→ 输出calc(100vh - 20)，非法
真正容易漏掉的是：插值只是第一步，后面空格、单位、布局链路一个都不能断。你看到 DevTools 里 calc() 没生效，先搜源码里有没有 #{$，再检查编译后 CSS 里空格和单位是否完整，最后往上翻三层父容器的高度设置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
