直接在 SCSS 中使用 env() 函数，不可封装进变量；需用 calc() 包裹以参与计算；必须配合 @supports 检测并提供 fallback；优先对容器用 padding，固定定位元素用 bottom + calc()；可用 mixin 封装但不可混用 SCSS 变量。
直接在 SCSS 里写 env() 就行，别封装、别转义、别用 $variable 代理
SCSS 是 CSS 的超集，env() 是原生 CSS 函数，编译时不会被处理或替换——它会原样输出到最终 CSS 中。你不需要、也不应该把它塞进 SCSS 变量里，比如 $safe-bottom: env(safe-area-inset-bottom) 这种写法看似整洁，但会导致编译后变成无效的 env(safe-area-inset-bottom) 字符串字面量（不带函数调用），浏览器根本识别不了。
正确做法就是像写普通 CSS 一样，在 SCSS 文件中直接使用：
.footer {
padding-bottom: env(safe-area-inset-bottom);
}
如果你需要复用这个值做计算，必须用 calc() 包一层，比如加个间距：
.tabbar {
bottom: calc(env(safe-area-inset-bottom) + 8px);
}
@supports 检测必须写，且不能只靠 env() 判断兼容性
env(safe-area-inset-bottom) 在不支持的浏览器里会被忽略，退回到前一个有效声明；但如果你没写 fallback，默认值就没了，结果是 padding-bottom: 0 或继承值，底部内容大概率被遮挡。
所以必须用 @supports 做特性检测，且检测目标是 env() 能生效的属性声明本身，不是 UA 或 iOS 版本：
- ✅ 正确：
@supports (padding-bottom: env(safe-area-inset-bottom)) - ❌ 错误：
@supports (env(safe-area-inset-bottom))（语法不合法） - ❌ 错误：
@supports (-webkit-safe-area-inset-bottom: 0)（已废弃，且非标准）
还要注意：iOS 11.2 之前连 @supports 都不支持，所以得双重 fallback —— 先写默认值，再用 @supports 覆盖：
body {
padding-bottom: 16px;
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
body {
padding-bottom: env(safe-area-inset-bottom);
}
}
慎用 margin + env()，尤其对 position: fixed 元素
用 margin-bottom: env(safe-area-inset-bottom) 推开内容，看起来简单，但实际会破坏滚动容器高度计算，导致可滚动区域变大、底部按钮上滑时突然“掉出”视口。
真正安全的做法是：
- 对容器类元素（如
<main></main>、<footer></footer>）优先用padding，让内部内容自然避开安全区 - 对固定定位的底部栏（
position: fixed; bottom: 0），改用bottom: calc(env(safe-area-inset-bottom) + Xpx)，把整个元素整体上提 - 绝对定位元素（
position: absolute）避免直接设bottom: 0，改用inset或显式计算：bottom: env(safe-area-inset-bottom)
错误示例（内容会被推下去，产生多余空白）：
.content { margin-bottom: env(safe-area-inset-bottom); }
推荐写法（精准控制位置）：
.tabbar {
position: fixed;
bottom: calc(env(safe-area-inset-bottom) + 4px);
padding: 8px 16px;
}
SCSS 变量和 env() 不要混用，但可以用 mixin 封装常用逻辑
你不能把 env() 存进 $safe-bottom，但可以写一个 mixin 来统一处理安全区 padding：
@mixin safe-padding($top: 0, $right: 0, $bottom: 0, $left: 0) {
padding-top: calc(#{$top} + env(safe-area-inset-top, 0));
padding-right: calc(#{$right} + env(safe-area-inset-right, 0));
padding-bottom: calc(#{$bottom} + env(safe-area-inset-bottom, 0));
padding-left: calc(#{$left} + env(safe-area-inset-left, 0));
}
.header {
@include safe-padding(16px, 0, 0, 0);
}
注意两点：
-
env()第二个参数是 fallback 值（如0），不是 SCSS 变量，默认值必须是 CSS 合法值 - 所有
env()必须出现在calc()内部，否则无法与数字相加
这种写法既保持了语义清晰，又避免了重复手写 calc()，比硬编码更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
