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