@at-root在BEM中不是解耦神器，而是精准控制输出层级的工具；它强制将规则提至根级，生成扁平类名（如.card__header），避免嵌套导致的后代选择器破坏BEM结构。
什么是 @at-root 在 BEM 场景下的真实作用？
@at-root 不是“取消嵌套”，而是把某段样式规则强行提升到最外层作用域，脱离当前选择器嵌套层级。在写 BEM（如 .card + .card__header + .card--hover）时，你常会遇到：嵌套太深导致 .card__header 被包在 .card 里，但 BEM 要求它是个独立、扁平的类名——这时 @at-root 就是解法。
怎么用 @at-root 正确生成 .block__element 和 .block--modifier？
常见错误是直接在嵌套中写 @at-root .block__element { ... }，结果生成了两个重复的顶层规则。正确做法是结合 & 引用父选择器，并用 @at-root 控制提升范围：
.card {
padding: 1rem;
@at-root .card__header {
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
@at-root .card--featured {
border: 2px solid #007bff;
}
}
这样编译后得到的是三个平行类：.card、.card__header、.card--featured，完全符合 BEM 扁平命名要求。
注意：@at-root 默认只跳出一层嵌套；如果外层还有 @media 或 @supports，它不会自动跳出——得显式写 @at-root (without: media) 或 @at-root (with: all)。
立即学习“前端免费学习笔记（深入）”；
为什么有时 @at-root 没生效？常见坑有哪些？
- 误以为
@at-root能“继承父选择器”，其实它完全脱离上下文：&__header在@at-root内不合法，必须手写完整类名.card__header - 和
@extend混用时容易出错：被@extend的占位符若在@at-root外定义，编译可能报Base class .%foo does not exist - Sass 3.4+ 才支持带参数的
@at-root (without: rule)，旧版本只认无参形式，升级前先查sass --version - 过度使用会让样式表失去视觉层级，阅读时难定位归属——建议仅用于 BEM 元素/修饰符，组件主体（
.card）仍保留在嵌套主结构里
替代方案对比：@at-root vs 手动扁平书写 vs #{} 插值
有人用字符串插值硬拼：.#{$block}__header，但这绕过了 Sass 的作用域检查，IDE 无法跳转、重命名失效，且不能复用 & 的语义化引用。
纯手动扁平写（每个类都从头写）看似简单，但维护成本高：改 .card 名就得同步扫所有 .card__xxx；而用 @at-root 配合变量或函数封装块名，就能保持一处修改、全局联动。
真正容易被忽略的是：BEM 中的元素（__）和修饰符（--）本就不该有 DOM 层级依赖，@at-root 只是让 CSS 输出匹配这一语义——不是炫技，是让编译结果诚实反映设计意图。
