@at-root是唯一安全生成bem扁平类名的方式，因&__item会编译为.card .card__title等带空格后代选择器，违背bem单类名原则；必须用@at-root #{&}__element提级输出。
用 @at-root 跳出嵌套，生成根级选择器
SCSS 默认所有嵌套都会编译成后代选择器，比如 .card { .title { color: red; } } 会输出 .card .title。但有时你需要在嵌套块里写一个跟父级平级、甚至完全脱离当前作用域的选择器（比如全局工具类、媒体查询顶层规则、或 BEM 的修饰符），就得主动“跳出”——@at-root 就是干这个的。
它不是取消嵌套，而是把括号内的规则“提一层”到编译后的 CSS 根作用域，不继承外层选择器前缀。
-
@at-root后面可以跟选择器，比如@at-root .btn--primary { ... }，直接输出.btn--primary - 也可以包裹代码块：
@at-root { .icon { display: inline-block; } }，整个块都脱离当前嵌套 - 配合
&使用很常见：在.card { @at-root .card--featured { ... } }中，.card--featured不会变成.card .card--featured，而是独立选择器 - 注意：
@at-root不影响变量作用域或逻辑结构，只改最终 CSS 的选择器层级
什么时候必须用 @at-root？
不是所有跳出都需要它，但以下场景不用就容易出错：
- 写 BEM 的修饰符类（如
.card--hovered）时，如果它和.card是同级语义，就不能被嵌套进.card下，否则选择器变成.card .card--hovered，完全失去修饰符本意 - 在组件内部定义全局响应式断点，比如
@media (min-width: 768px) { @at-root .layout--wide { ... } }，避免生成.card @media... .layout--wide这种非法语法 - 想复用第三方类名（如
.u-text-center）又不想被当前组件 scope 包裹，否则样式无法命中 - 需要给伪元素或伪类生成独立规则，比如
.card { @at-root .card::before { content: ""; } }，否则可能编译成.card .card::before（多了一层空格，语义错误）
@at-root 和 & 混用的典型陷阱
很多人以为 & 就能解决“回到父级”，其实 & 只是拼接当前选择器，不是跳出。比如：
.card {
&--hovered {
background: #eee;
}
@at-root .card--featured {
border: 2px solid gold;
}
}
上面这段，&--hovered 编译为 .card--hovered（因为 & 在最外层就是 .card，所以 &--hovered = .card--hovered），看似也“跳出”了，但它依赖于 & 所处层级；而 @at-root 是无条件提升，更可控。
- 如果嵌套三层：
.section { .card { @at-root .tooltip { ... } } }，.tooltip仍输出为根级，而&此时指向.card，写&--tip得到的是.card--tip，不是你想要的 -
@at-root可以带条件：例如@at-root (without: rule) { ... }排除某些嵌套类型，但日常开发中基本用不到，反而容易混淆，建议先掌握无参数版本 - Vite / Vue CLI 默认支持
@at-root，但老项目若用 ruby-sass（已废弃）则不支持，确认下sass版本是否 ≥ 3.4
替代方案：什么情况下不该用 @at-root？
它不是万能出口键。过度使用会让 SCSS 结构和 HTML 语义脱节，维护者难以追踪样式来源。
- 如果只是想写兄弟元素样式，优先用
+或~组合器，比如.card-title + .card-desc { margin-top: 0.5rem; }，比跳出再写@at-root .card-desc更符合意图 - 组件内局部覆盖第三方库样式，应优先用更高优先级选择器（如加
.my-component .lib-button），而不是跳到根级去硬怼，否则污染全局 - 媒体查询内部一般不需要
@at-root，因为@media本身已是一个作用域边界；但如果你在媒体查询里还想定义根级类，那才需要它
@at-root “救火”，而不是重构结构。SCSS 嵌套建议不超过 3 层，超过就该考虑抽成独立文件或用 BEM 命名解耦——@at-root 是逃生舱，不是驾驶舱。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
