@media print 不能嵌套进响应式断点，因其是布尔型媒体类型，非尺寸条件；浏览器会忽略如 @media (min-width: 768px) and print 的组合规则；SCSS mixin 可封装打印样式但不可动态生成其条件，必须独立引入并验证加载与生效。
@media print 不能嵌套进响应式断点 Mixin
直接结论：@media print 是布尔型媒体类型，不是尺寸断点，没法塞进 mq(md) 或 @include respond-to("md") 这类基于 min-width 的封装里。你写 @media (min-width: 768px) and print，浏览器直接忽略整条规则。
常见错误是把 @media print 当成一个可配置的断点变量来用，比如：
@include mq(print) { .nav { display: none; } }这编译出来要么语法非法，要么根本不会命中打印上下文。SCSS 的 mixin 可以包裹 @media print 块，但不能“动态生成”它的条件部分——它只有一条路：存在，或不存在。
只能用 SCSS 封装固定打印行为，不是逻辑
你可以用 @mixin 收拢重复的打印样式声明，但目的只是减少手写冗余，不是抽象条件。例如：
立即学习“前端免费学习笔记（深入）”；
@mixin print-hide($selectors...) {
@each $sel in $selectors {
#{$sel} {
display: none !important;
}
}
}
<p>@media print {
@include print-hide(".nav", ".sidebar", ".btn", ".ads");
}这类 mixin 有效，是因为它输出的是确定的、静态的 @media print 内部规则。它不依赖屏幕尺寸，也不做条件判断。
以下做法无效或危险：
- 试图传入断点名如
@include for-print("mobile")—— 打印时没有“mobile”概念 - 在
@media print外层再套@media (max-width: 768px)—— 浏览器不认嵌套媒体类型组合 - 用
$breakpoints映射print: "print"然后循环生成 —— 语义错乱，且无实际作用
必须独立文件 + 显式引入，别信 CSS-in-JS
@media print 规则要真正生效，得走浏览器原生加载路径：<link rel="stylesheet" href="print.css" media="print">。很多问题出在这一步：
- 用 JS 动态插入
<style>标签？media="print"属性可能被忽略 - 用 styled-components / Emotion？默认不注入
@media print，需手动启用ssr: true并确认服务端渲染时也输出该块 - 用 Shadow DOM 封装组件？样式被隔离，
@media print不会穿透 - CSS 文件路径 404 或跨域？DevTools 的 Network 面板里看
print.css是否返回 200
验证是否加载成功：打开真实打印预览（Ctrl+P），右键检查元素，在 Computed 面板中切换到 print 媒体，看你的规则是否出现在列表里。
隐藏非内容元素时，权重和顺序比嵌套技巧更重要
SCSS 嵌套本身对 @media print 没有额外增益；真正起作用的是选择器具体性、!important 和加载顺序。例如：
.navbar {
background: #333;
}
<p>@media print {
.navbar {
display: none; /<em> 会被 Bootstrap 的 .navbar-light!important 覆盖 </em>/
}
body .navbar {
display: none !important; /<em> 必须加权重 + !important </em>/
}
}容易被忽略的点：
-
visibility: hidden在打印中照样占位，撑出空白页，永远优先用display: none - 框架自带的响应式类（如
.d-none、.d-md-block）在@media print下默认不激活，得单独重写 -
* { float: none !important; position: static !important; }这种重置必须放在@media print开头，否则浮动残留会导致布局塌陷
打印样式不是写完就交付的终点，而是每次换打印机、用户调一次边距设置，就可能失效一次的持续维护项。最稳的防线不是靠嵌套多深，而是让内容结构本身抗切页、抗缩放、抗权重覆盖。
