SCSS无法实现运行时自适应高度，其calc()仅能安全拼接带单位的变量生成字符串，真正动态计算必须由CSS在浏览器渲染时完成。
SCSS 本身不能生成“运行时自适应高度”，calc() 的动态计算必须由 CSS 承担；SCSS 只能安全地生成 calc() 表达式字符串，或预设可维护的变量组合——关键在于别把编译期运算误当成运行时响应。
SCSS 中写 calc(100vh - 64px) 的正确姿势
很多人试图在 SCSS 里用变量做减法再塞进 calc()，比如：$header-height: 64px; height: calc(100vh - $header-height);。这会直接报错：Sass 不允许在 calc() 内部展开变量（除非用插值 #{}），而插值又极易引发单位混用或空格丢失。
推荐做法是把整个表达式当字符串拼出来：
- 用
#{}插值，但只插纯数值，单位写死在字符串里：height: calc(100vh - #{$header-height}); - 确保
$header-height是带单位的数（如64px），否则插值后变成calc(100vh - 64)→ 无效 - 必须手动加空格：
calc(100vh - #{$header-height})，不是calc(100vh-#{$header-height})
为什么不能用 SCSS 的 - 运算代替 calc()
写 $content-height: 100vh - $header-height; 看似合理，但这是编译期静态计算——Sass 无法处理 vh 单位的减法（单位不兼容），会直接报错或退化为字符串拼接。即使你绕过去用了 px，结果也是固定像素值，比如 height: 836px，窗口缩放时完全不会变。
立即学习“前端免费学习笔记（深入）”；
真正需要的不是“算一次”，而是“每次重排都重算”。只有原生 CSS 的 calc() 能做到这点。
-
100vh是运行时视口高度，calc()在渲染时实时求值 - SCSS 的
-是编译时文本替换，和浏览器尺寸毫无关系 - 混合单位（如
100% - 64px）只能靠 CSScalc()解析，SCSS 做不了
用 SCSS 变量管理 calc() 表达式更安全
把固定值抽成变量，再拼进 calc()，既保持可维护性，又不破坏运行时能力。例如头部高度变化时，只需改一个变量。
示例：
$header-height: 64px;
$sidebar-width: 240px;
<p>.main-content {
height: calc(100vh - #{$header-height});
width: calc(100vw - #{$sidebar-width});
}
- 所有参与
calc()的变量必须带单位（px、vh、vw等） - 避免在变量里存纯数字（如
$header-height: 64;），否则插值后单位丢失 - 如果要支持多主题（比如暗色模式下 header 高度不同），可用
@if分支生成不同calc()规则
容易被忽略的兼容性与空格陷阱
calc() 在现代浏览器中已无前缀需求，但空格错误仍是高频失效原因。SCSS 编译后若生成 calc(100vh-64px)（减号没空格），整条声明会被浏览器静默丢弃。
- 减号
-前后必须各有一个空格，乘除号*//建议也加空格（统一风格，防错） - 不要依赖 Sass 自动补空格——它不会检查
calc()内部格式 - 用
#{}插值时，空格必须写在引号/括号外，例如calc(100vh - #{$x})，不是calc(100vh-#{$x}) - 上线前用浏览器开发者工具检查最终 CSS 是否含有效
calc()，而非只看 SCSS 源码
最复杂的点其实不在写法，而在于意识：SCSS 变量只是“替身”，calc() 才是真正的执行者。一旦混淆编译期和运行时，所有“自适应”都会变成一戳就破的静态快照。
