env() 是原生 CSS 运行时函数，非 SCSS 函数；报错均源于 SCSS 语法误用，如非法选择器、变量包裹、插值转义或嵌套结构不闭合，与 env() 本身无关。
env() 本身不是 SCSS 函数，而是原生 CSS 运行时函数。你在 SCSS 文件里直接写 env(safe-area-inset-bottom) 是完全合法的——不会报语法错误。真正触发 SassError: expected selector 或类似编译失败的，几乎全是其他地方的问题，和 env() 无关。
下面几个才是高频真实原因：
& /deep/ el-pagination__sizes 这类写法在 Dart Sass 中已不被支持
Vue 单文件组件中常见的 /deep/、::v-deep 等深度选择器，本质是 Vue Loader 解析时做的 PostCSS 处理，不是 SCSS 语法。但很多人误把它塞进 SCSS 块里，比如：
.my-component {
& /deep/ el-pagination__sizes { // ❌ 错误：/deep/ 不是合法选择器，SCSS 编译器直接懵了
margin-top: 8px;
}
}
Dart Sass（当前主流）看到 /deep/ 就会抛出 expected selector，因为它根本不认识这个符号。
-
/deep/是 Vue 2 的非标准伪类，早已被弃用 - Vue 3 推荐用
:deep()，且必须写在的顶层作用域下，不能嵌套在&后面 - 正确写法应是：
.my-component :deep(.el-pagination__sizes) { margin-top: 8px; } - 如果你用的是 Vue 2 + sass-loader@10+（基于 Dart Sass），
/deep/已彻底失效，必须升级写法或降级 sass-loader（不推荐）
env() 被错误包裹进 SCSS 变量或插值中
比如这样写：
$safe-bottom: env(safe-area-inset-bottom); // ❌ 编译后变成字符串 "env(safe-area-inset-bottom)"，不是函数调用
.footer {
padding-bottom: $safe-bottom; // → padding-bottom: env(safe-area-inset-bottom); ← 看似一样，实则无效
}
问题在于：SCSS 变量存储的是值，不是表达式。env() 必须作为原始 CSS 函数字面量出现在最终输出中，中间不能经过变量赋值或 #{} 插值（除非你明确知道它会被原样透出）。
- ✅ 正确：直接写
padding-bottom: env(safe-area-inset-bottom); - ✅ 正确：用
calc()包一层：bottom: calc(env(safe-area-inset-bottom) + 4px); - ❌ 错误：
$x: env(...); ... padding-bottom: #{$x};—— 插值后可能被转义或加引号
嵌套结构错乱，让编译器误判 env() 所在上下文
例如在未闭合的媒体查询、或 @supports 块里漏了 }，导致后续行（哪怕只是 env()）被解析成“本该是选择器的位置”：
@media (max-width: 768px) {
.header {
padding-top: env(safe-area-inset-top); // ✅ 这行本身没问题
// ❌ 忘了闭合 @media，下一行会被当成新规则的开头
}
.footer {
padding-bottom: env(safe-area-inset-bottom); // ❌ SassError: expected selector —— 因为编译器还在等 @media 结束
}
这类错误往往不报 env() 相关提示，但定位到报错行时，第一反应不该怀疑 env()，而该检查上一个块是否完整。
env() 是浏览器运行时才求值的，SCSS 编译器只负责原样保留它。所有报错都来自你对 SCSS 语法边界的误操作，而不是 env() 本身有问题。最稳妥的做法就是：把它当普通 CSS 写，别动它，别包它，别嵌套它——只在需要 fallback 时配好 @supports 和默认值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
