必须用 @at-root 时：在嵌套中声明不继承父级作用域的顶层类（如 .is-loading），否则编译仍被包裹；@at-root (without: all) 可彻底跳出所有上下文（含 @media）；需避免在 @extend/@include 后直接使用，且循环中变量作用域受限。
什么时候必须用 @at-root 而不是靠手写顶层选择器
当你在深度嵌套的 Sass 结构里（比如 .component { .header { .title { ... } } }）想声明一个**不继承父级作用域、也不受父级 CSS 优先级影响**的类（如 .is-loading 或 .theme-dark），就不能只靠缩进或手动退格——Sass 编译器会忠实地把它们塞进父选择器里。这时候 @at-root 是唯一能“破壁”的语法，它让编译结果直接落在 CSS 文件顶层，而不是被包裹在层层父选择器中。
常见错误现象：.modal { .is-loading { @at-root .is-loading { opacity: 0.5; } } } 编译后仍是 .modal .is-loading，没生效；正确写法是 @at-root .is-loading { ... }，且必须写在嵌套块内、不能加任何前导选择器。
@at-root 和 @at-root (without: rule) 的实际区别
默认的 @at-root 会把整个规则块“提”到最外层，但它对 @media、@supports 等 at-rule 是“穿透”的——也就是说，如果你在 @media (min-width: 768px) 里用 @at-root，生成的 CSS 仍会被包在该媒体查询内。这往往不是你想要的。
这时要用带参数的版本：
立即学习“前端免费学习笔记（深入）”；
-
@at-root (without: rule)：只跳出普通 CSS 规则嵌套，保留当前所在的@media/@supports -
@at-root (with: rule)：相反，强制把规则也提到顶层（即连@media都不要了） -
@at-root (without: all)：彻底跳出所有上下文，包括@media、@supports、甚至@layer
典型场景：你在组件内部定义暗色主题开关 .theme-dark .card，但想让 .theme-dark 这个类本身全局可用，就得用 @at-root (without: all) .theme-dark { ... }，否则它可能被卡在某个 @media 块里无法触发。
嵌套中定义工具类时，@at-root 容易漏掉的两个坑
第一个坑：误在 @extend 或 @include 后面直接跟 @at-root。Sass 不允许在 mixin 展开或继承语句之后立刻用 @at-root，必须另起一个独立规则块。
第二个坑：在 @for、@each 循环里用 @at-root 时，变量作用域不会自动提升。比如：
@each $name, $color in $themes {
.#{$name} {
@at-root .theme-#{$name} { --primary: #{$color}; }
}
}
这段代码能跑通，但若把 $name 换成局部 @let 变量（Sass 1.50+），就可能报错——@at-root 内部访问不到循环体外声明的局部变量。
建议做法：把要提出来的规则提前计算好字符串，或改用 @function 返回完整选择器再传入 @at-root。
和 CSS :where()、:is() 混用时的优先级陷阱
有人试图用 @at-root + :where(.btn.is-primary) 来降低选择器权重，这是无效的。@at-root 只控制输出位置，不改变选择器本身的特异性（specificity）。:where() 才真正归零权重，但它的兼容性有限（IE 全挂，iOS Safari
所以如果目标是「全局可用 + 低优先级」，得双管齐下：
- 用
@at-root确保类出现在 CSS 顶层（避免被父选择器拖累） - 用
:where()包裹选择器来压制权重，例如：@at-root :where(.is-hidden) { display: none; }
注意：Sass 本身不校验 :where() 内容，但 PostCSS 或构建工具可能对伪类嵌套报 warning，需确认 pipeline 是否支持。
真正难处理的是跨模块样式污染——@at-root 让类全局可见，但不会帮你管理命名冲突。别指望靠它替代 BEM 或 CSS Modules，它只是个定位开关，不是作用域方案。
