“嵌套反转选择器”并非 scss 官方概念，实为利用 & 放在子选择器前（如 .is-active &）使父选择器作为后缀参与拼接，生成如 .is-active .btn 的后代选择器，改变特异性与作用域。
什么是“嵌套反转选择器”？
SCSS里没有叫“嵌套反转”的语法或功能。你看到的所谓“反转”，其实是用 & 放在子选择器**前面**，让父选择器被“提上来”作为后缀参与拼接，从而改变最终 CSS 的选择器结构和级联位置。它不改变编译顺序，但会生成语义不同、权重不同、作用域不同的规则。
& 写在子选择器前 vs 后，结果完全不同
关键看 & 是作为前缀还是后缀——这直接决定编译后选择器是“向上挂载”还是“向下展开”：
-
&.is-active→ 编译为.btn.is-active（同级类组合，权重 +1） -
.is-active &→ 编译为.is-active .btn（后代选择器，权重不变但作用域变窄） -
.theme-dark &→ 编译为.theme-dark .btn，常用于主题切换场景，依赖外层 class 控制内层样式 - 错误写法：
& .icon（带空格）→ 编译为.btn .icon，这不是“反转”，只是普通后代嵌套，且容易意外拉高权重
为什么有人想“反转”？真实需求其实是控制级联优先级
多数人想“反转”，本质是想让某个样式在加载顺序靠前时仍能生效——比如组件样式 import 在全局样式之后，但又不想改构建顺序。这时用 .theme-dark & 这类写法，等于把高权重上下文（如 .theme-dark）提前写死，让规则天然具备更高特异性或更早匹配时机：
- 它不改变 SCSS 文件内的书写顺序，但改变了最终 CSS 中该规则的“竞争位置”
- 如果全局样式里有
.btn { color: red; }，而组件里写.theme-dark & { color: blue; }，只要 DOM 有class="theme-dark"，这条就会赢 - 注意：这种写法会让样式强耦合于 HTML 结构，
.theme-dark必须存在且不能被 JS 动态移除，否则整条规则失效
容易踩的坑：你以为在“反转”，其实是在制造隐式依赖
这类写法看着简洁，但调试成本高，尤其当多个 & 反向嵌套混用时：
-
@at-root .legacy-mode &会跳出当前嵌套层级，但可能打乱 CSS 输出顺序，导致本该后加载的样式反而先出现 - 在
@media或:hover块里再用.dark &，编译后变成.dark .btn:hover，权重飙升到 (0,0,2,1)，远超预期 - Vue / React 的
scoped模式下，.theme-dark &会被自动加上 data 属性选择器，但.theme-dark本身不会——若它不在同一组件内，就完全不生效
真正需要的往往不是“反转”，而是明确作用域边界：用 @layer 控制级联层，或用 CSS Modules 隔离，比靠 & 位置博弈更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
