直接合并嵌套媒体查询可行但需工具干预，因sass默认“就近展开”不跨选择器合并；可用sass-media-query-combiner后处理、include-media编写期规范或postcss-media-merger构建时合并，关键在人工定义合并规则。
直接合并嵌套媒体查询是可行的，但不能依赖 Sass 编译器默认行为——它不会自动把散落在不同选择器里的 @media (max-width: 40em) 合并成一个块。必须借助工具链干预，否则输出 CSS 中会重复出现相同断点的媒体查询，增加文件体积、拖慢渲染。
为什么原生 Sass 不合并嵌套媒体查询
Sass 的编译逻辑是“就近展开”：每个 @media 块在嵌套中被遇到时，就立即生成对应 CSS 规则，不跨选择器收集。比如：
header { font-size: 17pt; @media (max-width: 40em) { font-size: 15pt; } }
nav { margin-top: 2rem; @media (max-width: 40em) { margin-top: 1rem; } }
编译后就是两个独立的 @media (max-width: 40em) 块，而不是一个里面包含 header 和 nav 的合并版本。
这不是 bug，是设计使然——Sass 优先保证语义可读性与开发者预期，而非输出优化。
用 sass-media-query-combiner 后处理 CSS
这是最轻量、侵入性最小的方案：先让 Sass 正常编译出 .css，再用命令行工具合并媒体查询块。
- 安装：
npm install -g sass-media-query-combiner - 运行：
smqc input.css output.css（注意：它处理的是 CSS，不是 SCSS） - 它只合并完全相同的媒体查询字符串，比如
@media (max-width: 40em)和@media (max-width: 40em)会被合并；但@media (max-width: 40em) and (orientation: portrait)就不会和前者合并 - 不支持嵌套媒体查询中的嵌套条件（如
@media (min-width: 30em) { @media (hover: hover) { ... } }），这类结构会被跳过
用 include-media 在编写期规避散乱
与其事后合并，不如从源头控制结构。include-media 不改变编译逻辑，但它强制你把媒体查询逻辑集中到 mixin 调用中，天然减少重复断点书写。
- 安装：
npm install include-media - 引入：
@use 'include-media' as *; - 写法示例：
.card { width: 300px; @include media('>=tablet') { width: 400px; } @include media('>=desktop') { width: 500px; } } .sidebar { flex: 0 0 250px; @include media('>=tablet') { flex: 0 0 300px; } } - 关键点：它本身不合并输出，但配合统一的断点变量（如
$breakpoints: ('mobile': 375px, 'tablet': 768px)），能极大降低人为写出不一致断点的概率 - 真正起作用的是团队约定 + 工具校验（比如用 stylelint 插件检查是否只用了预设断点名）
PostCSS 插件方案（适合现代构建流程）
如果你已用 Webpack/Vite 等打包工具，postcss-combine-duplicated-selectors 或更专一的 postcss-media-merger 可在 CSS 构建阶段合并。比 CLI 工具更可控，且能和 sourcemap 对齐。
- 推荐
postcss-media-merger（需手动配置匹配规则） - 它支持正则匹配媒体查询字符串，例如把
@media screen and (max-width: 767px)和@media (max-width: 767px)视为等价 - 注意：某些插件会错误合并带不同嵌套层级的规则（比如把组件内
&__item和全局.btn的同断点规则强行塞进同一个@media），要加ignore: /deep/类过滤 - 必须放在 PostCSS 插件链靠后位置，确保所有
@media都已展开完毕
真正的难点不在工具选型，而在于确认哪些媒体查询“应该”被合并——比如 @media (prefers-reduced-motion) 和 @media (max-width: 40em) 绝对不能合，但工具不会判断语义。这事得人来定规则，工具只执行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
