@at-root不是退出嵌套的快捷键，而是显式重置css输出层级的指令；它仅作用于直接包裹的规则，不擦除所在上下文的嵌套路径，故.modal { .is-loading { @at-root .is-loading {} } }仍编译为.modal .is-loading。
@at-root 不是“退出嵌套”的快捷键，而是显式控制编译时输出位置的指令；直接写在嵌套块内部却指望它提级，大概率编译失败或产出错误选择器。
为什么 .modal { .is-loading { @at-root .is-loading { } } } 仍生成 .modal .is-loading
这是最典型的误用：@at-root 只作用于它**直接包裹的规则**，不擦除其所在上下文的嵌套路径。上面写法中，.is-loading 实际仍是 .modal 的子选择器，Sass 根本不会把它提级——它被当成普通嵌套块里的一个“带 @at-root 标记的子规则”，而非独立根级规则。
- 正确做法是把
@at-root .is-loading { }单独提出来，放在.modal块外部 - 或者用
@at-root (without: all) .is-loading { }强制剥离所有包裹层（包括@media、@supports） - 别在
@at-root内再用&：例如.card { @at-root &__header { } }会报错，因为&依赖嵌套上下文，而@at-root已清空它
@at-root 默认只跳出选择器嵌套，(without: all) 才能真正脱离 @media 或组件作用域
你在 @media (min-width: 768px) 里写 @at-root .theme-dark { }，编译结果还是包在媒体查询内——这意味着 .theme-dark 在小屏下完全不可用。
-
@at-root等价于@at-root (without: rule)，只跳脱父选择器，不碰@media或@supports -
@at-root (without: media)能跳出媒体查询，但还卡在父选择器里（如编译出.modal .theme-dark） - 要彻底释放到 CSS 根级且无视所有作用域，必须写
@at-root (without: all) .theme-dark { } -
with:后只能跟media、rule、all；写成with: screen或with: query直接报错
BEM 场景下必须用 @at-root #{&}__element，否则产出的是后代选择器而非单类名
SCSS 的 & 表示“当前完整选择器字符串”，不是“块名”。所以 .card { &__title { } } 编译为 .card .card__title（带空格），这违背 BEM 扁平化原则——它依赖 DOM 层级，一旦 HTML 中 .card__title 没包在 .card 里，样式就失效。
- 唯一安全写法：
.card { @at-root #{&}__header { color: #333; } }→ 输出.card__header - 修饰符同理：
@at-root #{&}--loading { opacity: 0.7; }→.card--loading - 禁止在
&:hover或@media内部再用@at-root #{&}__xxx，输出顺序不可控，且破坏 BEM 语义层级 - 变量也适用：
$block: "button"; @at-root #{$block}__icon { }
在 @each 循环或 @mixin 中用 @at-root 要小心变量不可见和语句顺序限制
Sass 1.50+ 引入了 @let，但它的变量作用域不穿透 @at-root 块。循环中定义的局部变量，在 @at-root 内部访问不到。
-
@each $name in (primary, secondary) { @at-root .btn--#{$name} { } }✅ 可用，插值在循环上下文中解析 -
@each $name in (primary, secondary) { @let $n: $name; @at-root .btn--#{$n} { } }❌ 报错，$n不在@at-root作用域链上 -
@include或@extend后不能紧跟@at-root：Sass 会报语法错误，必须另起一个独立规则块 - 别把它当 Vue
:deep()用：.parent { @at-root .child { }生成的是真实全局类，可能污染其他组件，不解决 scoped CSS 隔离问题
真正难的不是记住语法，而是判断该不该提级——多数时候，抽离到顶层比硬塞 @at-root 更清晰；只有当逻辑强耦合嵌套上下文（比如 BEM 元素生成、主题工具类批量注入）时，才值得引入它带来的作用域复杂性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
