scss 不解析 :is() 和 :where()，dart sass 1.70+ 直接透传；需注意空格、插值限制、避免 mixin 封装，并用 @supports 检测渐进增强，:where() 在 scoped style 中可安全穿透第三方组件。
SCSS 本身不解析或转换 :is() 和 :where() —— 它们是原生 CSS 功能，SCSS 编译器（如 Dart Sass）默认直接透传，不做展开、降级或语法校验。想用好它们，关键不是“怎么在 SCSS 里写”，而是“怎么安全地集成进 SCSS 工作流”。
SCSS 中写 :is() 会触发编译报错吗？
不会。Dart Sass 从 1.70+ 开始已支持原生 CSS 伪类函数的语法识别，:is() 和 :where() 被当作合法选择器片段保留输出。但注意：
- SCSS 不检查括号内选择器是否合法 —— 比如
:is(.a, .b, )（末尾多逗号）或:is(.a::before)（含伪元素），Sass 不报错，但浏览器会静默丢弃整条规则 - 嵌套中使用需手动加空格：
&:is(h1, h2)是错的，必须写成& :is(h1, h2)（&后留空格），否则编译后变成.block:is(h1, h2)，语义完全错误 - 变量不能直接插进
:is()括号里：$elems: "h1, h2"; :is(#{$elems})会输出无效 CSS，Sass 不做拼接校验
为什么别用 SCSS mixin 封装 :is()？
常见误区是写一个 @mixin is($list) { :is(#{$list}) { @content; } } 来“复用逻辑”。这看似简洁，实则危险：
- 失去语法高亮和编辑器校验 —— VS Code 或 WebStorm 对
:is()的支持依赖原始字符串，mixin 插值后无法识别 - 破坏开发者工具调试体验 —— 浏览器 Elements 面板显示的是展开后的插值结果（如
:is(h1, h2)），但 Source Map 映射回 SCSS 文件时指向 mixin 调用行，而非实际选择器定义处 - 容易引入空格/换行污染：
@include is("h1,\nh2")输出:is(h1,\nh2)，部分旧版 Safari（15.3 及更早）会因换行直接拒绝整条规则
如何用 @supports 在 SCSS 中做渐进增强？
这是最务实的落地方式：保留兼容写法为 fallback，用 @supports 包裹 :is()/:where() 版本。SCSS 支持嵌套 @supports，且能复用变量：
$common-links: a, button, [role="button"];
<p>/<em> 兼容写法（所有浏览器） </em>/
.header nav #{$common-links},
.sidebar nav #{$common-links},
.footer nav #{$common-links} {
padding: 0.5rem 1rem;
}</p><p>/<em> 增强写法（仅支持 :is() 的浏览器） </em>/
@supports (selector(:is(*))) {
:is(.header nav, .sidebar nav, .footer nav) #{$common-links} {
padding: 0.5rem 1rem;
}
}</p>
注意：@supports (selector(:is(*))) 是检测标准语法支持的可靠方式；不要用 @supports selector(:is(a, b))，部分浏览器解析失败会误判为不支持。
:where() 在 SCSS scoped style 中的真实价值
Vue / Svelte 等框架的 <style scoped></style> 会自动为选择器添加属性哈希（如 .btn[data-v-abc123]）。此时 :where(.btn) 的权重仍是 0-0-0，而外部框架组件类（如 .el-button）没被 scoped，权重为 0-1-0 —— 这正是 :where() 发挥作用的场景：
<style scoped>
/* 安全穿透第三方组件，不干扰其原有权重 */
:where(.el-button, .ant-btn) {
border-radius: 4px;
padding: 8px 16px;
}
</style>
这里不用 :is()，因为 :is(.el-button) 会带上 scoped 属性哈希，权重升为 0-1-1，反而可能覆盖不到未 scoped 的目标元素；而 :where() 剥离了自身权重，只靠外部选择器“借力”，恰好匹配设计意图。
真正难的不是写出 :is()，而是判断某条规则里该用 :is() 还是 :where() —— 权重变化肉眼不可见，必须看 computed styles 里的 specificity 数值，否则改完以为生效了，其实被其他规则悄悄压掉了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
