SCSS嵌套使选择器变长难覆盖，因父选择器被原样拼接导致权重虚高、浏览器回溯变慢；@at-root本质是声明输出位置而非取消缩进，需配合without: media rule等精准提级，避免误用。
为什么嵌套会让CSS选择器变长且难覆盖
SCSS嵌套本身不“错”，但默认行为会把父选择器字符串原样拼到子规则前，导致权重虚高、匹配变慢、覆盖要写更长的选择器。比如 .card .header .title 编译后是 0-0-3-0 权重，而实际业务中你可能只需要 .card__title（0-0-1-0）或独立的 .title（0-0-1-0）。这不是语义问题，是浏览器渲染引擎逐级回溯带来的性能和维护成本。
@at-root 不是“取消缩进”，而是“声明输出位置”
@at-root 的本质不是视觉上“退格”，而是告诉 Sass：“这段样式逻辑上不属于当前嵌套路径，请提级到根作用域输出”。它解决的是“我在 .modal 里写了一个工具类，但它不该带 .modal 前缀”这类真实场景。
- 错误用法：
.modal { @at-root .u-text-center { text-align: center; } }→ 输出.u-text-center✅，但容易误以为它能“自动修复所有嵌套” - 正确理解：
@at-root默认只跳出选择器嵌套（without: rule），对@media或@supports无效 - 常见漏点：在
@media (max-width: 768px)内部写@at-root .btn，结果仍是@media { .btn { ... } }，没跳出媒体查询
怎么安全跳出 @media + 父选择器双重嵌套
当你要在响应式块里定义一个完全平级的组件样式（比如移动端下把 .card__body 提成独立类），必须同时跳出媒体查询和父选择器上下文，否则会产出冗余组合。
- 只写
@at-root(without: media)→ 跳出@media，但保留父选择器，如.card a span - 只写
@at-root(without: rule)→ 跳出父选择器，但卡在@media内，如@media { .span { ... } } - 必须合写：
@at-root(without: media rule)→ 同时清除两者，输出纯span { ... } - 注意空格分隔：
without: media rule是合法语法；without: (media, rule)或without: [media rule]会报错
用 @at-root #{&}__xxx 替代 &__xxx 生成 BEM 元素类名
直接写 &__title 看似方便，但 SCSS 会把它解释为“当前选择器后加空格再拼字符串”，结果是 .card .card__title（带空格），违反 BEM 规范且无法被 PurgeCSS 正确识别。
- 错误：
.card { &__title { color: #333; } }→ 输出.card .card__title - 正确：
.card { @at-root #{&}__title { color: #333; } }→ 输出.card__title - 变量也适用：
$block: "dialog"; @at-root #{$block}__footer { padding: 12px; }→ 输出.dialog__footer - 禁止嵌套使用：
&:hover { @at-root #{&}__icon { ... } }会拼出.button:hover__icon，浏览器直接忽略
真正容易被忽略的点在于：@at-root 不是“万能解药”，它只解决输出位置问题。如果你的嵌套结构本身语义混乱（比如在 .nav li a 里写 &:focus 再套 &__icon），再多次提级也救不回可维护性——此时该重构组件边界，而不是堆指令。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
