Sass中用&配合父级状态类（如.is-active）控制子组件状态最干净，可避免硬编码和维护成本；需确保编译后选择器为.btn.is-active而非全局匹配，并通过命名前缀或@at-root防止冲突。
怎么用父级选择器控制子组件的状态类
直接上结论：Sass 里用 & 配合父级状态类（比如 .is-active、.is-disabled）是最干净的写法，不用在每个子元素上重复写状态前缀。
常见错误是把状态硬编码进子选择器里，比如写成 .btn.is-active .btn__icon —— 这样一旦父级状态名改了，所有子规则全得手动同步，维护成本陡增。
- 推荐写法：
.btn { &.is-active { .btn__icon { opacity: 1; } .btn__text { font-weight: bold; } } } - 关键点：
&代表当前父选择器（这里是.btn），所以&.is-active编译后是.btn.is-active，天然保证父子绑定关系 - 如果父级状态类名带命名空间（如
.c-card--hover），记得保持一致，别混用.is-hover和--hover，否则样式不会触发
Sass嵌套里怎么避免状态类污染全局
父级状态一多，&.is-loading .btn__spinner、&.is-error .btn__label 堆在一起，容易漏掉 & 或错用空格，导致选择器层级错乱。
最常踩的坑是写成 .btn.is-loading .btn__spinner（漏了 &），结果编译出来是全局匹配，而不是仅限于当前组件内；或者多打一个空格变成 & .btn__spinner，就脱离了父状态约束。
- 检查方法：编译后看 CSS 是否以
.btn.is-active开头，而不是单独的.is-active或.btn .btn__icon - 建议把状态块集中放在最后，和基础样式隔开，视觉上更易定位：
.btn { // 基础样式 display: inline-flex; // 状态块统一收尾 &.is-active { … } &.is-disabled { … } } - 不要嵌套过深：超过三层（如
&.is-active .item .item__inner span）就该考虑抽成独立 BEM 元素，否则可读性和复用性都下降
为什么不能直接用 :is() 或 :where() 替代 Sass 父级状态
因为 :is() 是运行时 CSS 逻辑，它不感知组件结构边界。你写 :is(.btn.is-active) .btn__icon，浏览器会去全局找匹配的 .btn.is-active，哪怕那个节点根本不在当前组件 DOM 树里，样式也可能意外生效。
Sass 的 & 是编译期确定的，生成的选择器严格绑定在父选择器下，天然具备封装性；而 :is() 是运行时计算，没法做作用域隔离。
- 兼容性注意：
:is()在 Safari 15.4+、Chrome 101+ 才稳定支持，老项目用它会丢样式 - 性能差异不大，但语义完全不同：一个是“我声明这个状态属于这个组件”，一个是“我声明这些元素只要满足条件就套样式”
- 真要用逻辑组合，优先选 Sass 的
@if+ 变量控制输出，而不是靠 CSS 伪类兜底
状态类命名冲突时怎么安全切换
当多个组件共用 .is-active，但行为不同（比如菜单项激活变色，按钮激活变阴影），光靠父选择器还不够，得靠命名约定卡死作用域。
最容易被忽略的是：状态类本身没语义，.is-active 到底是“被选中”还是“正在加载中”，全靠上下文猜。线上出问题往往是因为两个组件碰巧用了同一个状态类，但 Sass 里又没加限定。
- 强制加组件前缀：
.nav-item.is-nav-item-active或.btn.is-btn-active，虽然冗长，但零歧义 - 用
@at-root提升作用域，避免嵌套污染：.btn { &.is-active { @at-root .btn--primary#{&} { background: blue; } @at-root .btn--secondary#{&} { background: gray; } } } - 上线前用 DevTools 检查 computed styles，确认目标元素实际命中的是哪个选择器，别只信 SCSS 文件里的缩进
事情说清了就结束。状态类不是写完就跑，关键是每次加新状态时，顺手检查三件事：编译后选择器是否带父级、是否和其他组件撞名、DevTools 里有没有意外覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
