SCSS 无法真正封装 :has()，因其编译期无 DOM 信息，所谓“封装”实为 JS 驱动类名切换与 SCSS 命名约定的组合；推荐用 @mixin 定义如 .card--has-badge 状态类并由 JS 同步控制。
SCSS 本身不能封装真正的 :has()，因为它不参与运行时 DOM 判断；所谓“封装”，其实是把 JS 驱动的类名切换逻辑和 SCSS 命名约定打包成可复用结构。
为什么不能在 SCSS 里“实现” :has()
SCSS 编译阶段完全不知道 HTML 中是否存在某个子元素。.card:has(.badge) 在 CSS 中是浏览器运行时动态匹配的，而 SCSS 的 & 只能拼出静态选择器，比如 .card .badge 或 .card:hover .badge——它永远无法反向表达“父元素因子元素存在而生效”。所有声称“SCSS 支持 :has”的写法，本质都是人工约定或 JS 配合。
用 @mixin 封装类名约定 + JS 同步逻辑
这是目前最可控、可维护的降级路径。核心是把状态“上提”到父元素 class 上，再用 SCSS 嵌套生成对应样式：
- 定义一个命名模式，例如
.card--has-badge表示该 card 内部有.badge - 用
@mixin has-badge生成所有依赖该状态的样式块，内部用&.card--has-badge引用 - JS 负责监听并添加/移除
--has-badge类（用el.querySelector('.badge') !== null判断，不用matches(':has(.badge)')，后者在旧浏览器报错） - 避免在 mixin 中硬编码选择器层级，用参数控制作用范围，例如：
@mixin has-badge($selector: '.card') { #{$selector}.card--has-badge { box-shadow: 0 2px 6px rgba(0,0,0,0.1); & .header { font-weight: bold; } } }
别踩这些坑
常见错误不是写错 SCSS，而是混淆了职责边界：
立即学习“前端免费学习笔记（深入）”；
- 不要在 SCSS 里写
@supports selector(:has(a))—— 它在 Safari ≤15.3、Firefox ≤108、所有 IE 中根本无效，连 false 都返回不了 - 不要把 JS 检测逻辑塞进
@function：SCSS 函数运行在编译期，拿不到 DOM - 不要用
!default给:has()提供 fallback：CSS 层面不存在“fallback”，整条规则被忽略就是被忽略 - MutationObserver 监听范围要精确：只监听可能插入
.badge的容器（如.card），而不是整个document，否则性能明显下降
真正难的不是写几行 SCSS，而是确定哪些交互必须靠 JS 补全、哪些可以靠结构约束规避——比如把“有 badge 才显示箭头”改成“所有 card 默认显示箭头，但 badge 存在时才激活 hover 效果”，有时比模拟 :has() 更轻量。
