@at-root的作用是将当前规则块提一层，脱离父选择器嵌套上下文，仅阻止选择器拼接，并不生成真正全局样式；它对伪类、媒体查询等有隐含影响，需配合(without: rule)等参数精准控制。
用 @at-root 跳出 sass 嵌套，但不是为了“定义全局选择器”
直接说结论：@at-root 的作用是把当前规则块“提一层”，让它脱离父选择器的嵌套上下文，但它本身不生成全局 css 选择器——它只是让编译结果里不带父级前缀。很多人误以为用了 @at-root 就能绕过作用域限制写“真正全局”的样式，其实不是：CSS 本身没有“模块级作用域”，但 Sass 的嵌套逻辑会自动拼接选择器，@at-root 只是阻止这个拼接发生。
@at-root 的两种典型用法和对应编译结果
常见错误是只写 @at-root 却没注意它默认只提一级；更关键的是，它对伪类、属性选择器等“同级修饰”行为有隐含影响。
- 写
@at-root { .btn { color: red; } }→ 编译后就是.btn { color: red; }，完全脱离外层嵌套 - 写
.card { @at-root .btn { color: blue; } }→ 编译后仍是.btn { color: blue; }，不是.card .btn - 但写
.card { @at-root .btn:hover { color: green; } }→ 编译后还是.btn:hover { color: green; }，:hover不会被“拉平”，它属于.btn的一部分
为什么 @at-root 容易踩坑：伪类、媒体查询、插值混合
真正容易出问题的地方不在基础用法，而在和 &、@media 或变量插值混用时——Sass 会按规则优先级决定“提哪一层”，而不是你直觉想提的那层。
- 写
.dialog { @at-root .dialog__header { font-size: 1.2em; } }✅ 安全，明确脱离.dialog - 写
.dialog { @at-root &__footer { padding: 1rem; } }❌ 编译报错：&在@at-root内部无效，因为&指向的是当前嵌套上下文，而@at-root已经把它干掉了 - 写
.section { @at-root @media (min-width: 768px) { padding: 2rem; } }→ 编译后是@media (min-width: 768px) { .section { padding: 2rem; } }，不是你想的“媒体查询也提根”，它只提选择器，不提规则块
替代方案：什么时候该用 @at-root (without: rule)
默认 @at-root 等价于 @at-root (with: rule)，但 Sass 还支持更细粒度控制——比如只想把选择器提出来，却保留 @media 或 @supports 包裹。这时候必须显式写清楚。
立即学习“前端免费学习笔记（深入）”；
-
@at-root (without: rule) { .icon { display: inline-block; } }→ 提选择器，但若外层有@media，它仍被包裹 -
@at-root (with: media) { .icon { width: 16px; } }→ 保持@media上下文，只跳出普通嵌套 - 最常被忽略的一点：
@at-root对@keyframes无效，动画名必须在顶层定义，否则编译失败，报错信息是Invalid CSS after "...": expected "{", was "}"
Sass 的嵌套本质是语法糖，@at-root 是它的“逃逸舱口”，但舱口开在哪、开多大，得看括号里写的什么——漏写 (without: ...) 或误用 &，编译器不会提醒你逻辑矛盾，只会默默产出不符合预期的 CSS。