可行但需分层封装：用 interactive-hover-active 处理 :hover/:active，focus-behavior 独立控制 :focus-visible 或 :focus，避免伪类逻辑混淆与兼容性问题。
直接用 SCSS 的 @mixin 封装交互伪类组合是可行的，但必须规避重复生成、选择器权重失控和 :focus-visible 兼容性陷阱——否则反而增加维护成本。
为什么不能简单写一个 hover-active-focus mixin？
很多团队一上来就封装类似 @mixin interactive-states($hover, $active, $focus)，结果发现编译后 CSS 膨胀、样式被覆盖、键盘聚焦时鼠标悬停态干扰。根本问题在于：这三类伪类的触发逻辑不同，且浏览器对 :focus 和 :focus-visible 的判定策略正在演进。
-
:hover是瞬时、无状态的，不依赖焦点管理 -
:active仅在指针按下瞬间生效，无法与:focus同时共存于同一元素（除非手动模拟） -
:focus默认对所有可聚焦元素生效，但现代可访问性实践要求区分键盘聚焦（:focus-visible）和鼠标点击后残留的:focus
推荐做法：分层封装 + 显式控制焦点行为
用两个独立 mixin 分离「视觉反馈」和「焦点逻辑」，避免把 :focus 当作万能开关硬塞进交互组：
- 用
@mixin interactive-hover-active($hover-style, $active-style)处理鼠标路径（:hover+:active），默认不包含:focus - 用
@mixin focus-behavior($focus-style, $focus-visible-only: true)单独控制焦点样式；当$focus-visible-only为true时，只输出:focus-visible，否则 fallback 到:focus - 在调用处显式组合，例如：
&:hover, &:active { @include interactive-hover-active(...); } &:focus-visible { @include focus-behavior(...); }
这样既保留语义清晰度，又兼容 Safari 15.4+ 对 :focus-visible 的原生支持，也避免旧版 Chrome 强制渲染 :focus 导致的“点一下按钮就蓝框”的体验污染。
SCSS 实现示例与关键参数说明
以下是一个轻量、可复用的实现（不依赖第三方库）：
@mixin interactive-hover-active($hover-style, $active-style) {
&:hover {
#{$hover-style}
}
&:active {
#{$active-style}
}
}
@mixin focus-behavior($focus-style, $focus-visible-only: true) {
@if $focus-visible-only {
&:focus-visible {
#{$focus-style}
}
} @else {
&:focus {
#{$focus-style}
}
}
}
-
#{$hover-style}接收类似transform: scale(0.98)的字符串，避免 map 写法带来的嵌套复杂度 - 不使用
@content块，防止调用方意外注入非伪类规则（比如误加&::before） - 不自动添加
transition，因为动效时长/属性需按组件粒度控制（按钮 vs 链接差异很大）
容易被忽略的兼容性坑
真正上线前必须验证三点：
- Safari 15.6 及更早版本不支持
:focus-visible，需在构建流程中插入@supports not selector(:focus-visible)回退规则 - 如果组件内含
tabindex="-1"，:focus仍会触发，但:focus-visible不会——这是预期行为，不是 bug - 某些 UI 库（如 Bootstrap 5.3）已内置
:focus-visiblepolyfill，若重复引入会导致样式冲突，建议先检查全局 CSS 构建产物中是否已有相关规则
伪类不是装饰糖，是可访问性链路的一环；把 :focus 简单等同于视觉反馈，迟早会在 WCAG 审查或键盘用户投诉里暴露出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
