@at-root (with: media)能解决媒体查询嵌套后位置错乱问题，它只将@media规则提至与原选择器同级，保持内部选择器路径不变，避免优先级异常、复用困难及display: none截断。
为什么@at-root能解决媒体查询嵌套后位置错乱的问题
默认情况下，Sass里在选择器内部写@media，生成的CSS会把媒体查询套在选择器层级里，比如.btn:hover里写@media (max-width: 768px)，结果是@media {... .btn:hover {...}}——这会让样式优先级变高、复用困难，还可能被父级display: none意外截断。而@at-root强制把媒体查询提一级，让它和原选择器平级，生成的是.btn:hover {...} @media (max-width: 768px) {.btn:hover {...}}，结构更干净，也符合CSS书写习惯。
@at-root (with: media)和裸@at-root的区别
裸@at-root会把整个块提到最外层，包括选择器本身；但多数时候你只想提媒体查询，保留选择器嵌套逻辑。@at-root (with: media)是精准提拉——只把@media规则提上去，里面的选择器路径不变。不加(with: media)容易误提整个样式块，导致类名丢失或全局污染。
- ✅ 正确：用
@at-root (with: media)只提媒体查询 - ❌ 错误：用
@at-root后，&指向失效，.card__header可能变成.card .card__header甚至孤立类名 - ⚠️ 注意：
with:后面只能跟media、rule、all，没有screen或query这种写法
在@mixin里用@at-root (with: media)要防变量泄漏
如果在mixin里定义了局部变量（比如$size: 16px），再用@at-root (with: media)包裹@media，这个变量在媒体查询块里就不可见了——因为@at-root创建了新的作用域。不是bug，是Sass作用域规则决定的。
- ✅ 解决：把变量声明提到mixin顶层，或改用
!global（不推荐） - ✅ 更稳：把媒体查询逻辑拆成独立mixin，用
@include调用，避免嵌套过深 - ❌ 常见坑：在
@at-root块里直接引用$breakpoint-sm却没确认它是否已在外部定义
生成CSS时@at-root对压缩和source map的影响
PostCSS或cssnano这类工具在压缩时，会按最终输出的CSS结构做合并判断。如果@at-root (with: media)让多个相同媒体查询分散在不同位置（比如分别在.btn和.link里），压缩器无法自动合并它们，最终CSS体积反而略大。Source map映射也会跳转到@at-root那一行，而不是原始@media所在行，调试时可能多绕半步。
立即学习“前端免费学习笔记（深入）”；
- ✅ 折中方案：高频复用的断点，统一用
@mixin responsive封装，内部用@at-root (with: media) - ✅ 查看产出：用
sass --watch配合--style expanded确认实际生成结构 - ⚠️ 注意：Webpack的
sass-loader默认开启sourceMap，但@at-root会让map指向“提根后”的位置，不是源文件行号
真正难的不是写@at-root，而是想清楚哪一层该提、哪一层该留——有时候故意不提，就是为了利用嵌套带来的权重提升或上下文隔离。别迷信“提出来就更优雅”，先看浏览器里computed styles是不是你想要的那套规则顺序。
