@media print 不能封装为响应式断点混合宏，因其是独立布尔型媒体类型，不支持 min-width 等可变参数；SCSS 只能封装固定打印样式块（如 print-hide），不可动态生成条件逻辑，所有混入断点系统的写法均导致编译无效。
@media print 不能当响应式断点封装，它是个固定布尔型媒体类型，SCSS 只能收拢样式块，不能动态生成条件逻辑。
为什么不能把 @media print 写成 SCSS mixin 断点？
浏览器只认 @media print 这个字面量，不接受 @media (min-width: 768px) and print 这类非法语法——解析时直接忽略整条规则。所有试图用 $breakpoints 映射、@mixin for-print("desktop") 这类写法，编译出的 CSS 在打印时根本不会生效。
SCSS 的 @mixin 可以包裹 @media print { ... }，但仅限于组织已有规则，不是抽象“条件”。它的作用是减少重复，比如统一隐藏元素或强制黑字，而不是推导“该不该印”。
怎么用 SCSS 合理封装打印样式？
只封装固定行为，且显式命名，避免语义混淆：
立即学习“前端免费学习笔记（深入）”；
-
@mixin print-hide($selectors...)：接收选择器列表，生成#nav, .ads, .btn { display: none !important; } -
@mixin print-link-url()：输出a[href]:after { content: " (" attr(href) ")"; font-size: 9pt; } -
@mixin print-avoid-break()：加page-break-inside: avoid; break-inside: avoid;到table、img、.section
不要传入「设备类型」或「尺寸」参数——print 场景里没有这些概念。每个 mixin 必须只做一件事，且结果可预测。
为什么推荐单独建 print.scss 而非混在主文件里？
构建工具链（如 Tailwind、CSS-in-JS、PostCSS）可能误删、错位或压缩 @media print 块；而独立文件配合 <link rel="stylesheet" href="print.css" media="print">，浏览器明确分流，调试时 Network 面板一眼可见是否加载成功。
实际操作建议：
- 新建
print.scss，只写@media print { ... }块，不混任何@media screen或全局样式 - 用
@import引入变量（如$font-size-base），但别引入屏幕专用函数或 mixin - 编译后对
print.css单独做最小化，体积小就内联，避免额外请求
最容易被忽略的验证环节
window.matchMedia('print').matches 只能告诉你当前是否进入打印模式，不能反映分页效果。Chrome、Firefox、Edge 的分页引擎差异极大，@media print 规则全绿 ≠ 表格没被切断、URL 没被截断、页眉没跑进内容区。
上线前必须手动：Ctrl+P → 翻页检查三遍 → 换浏览器再翻三遍 → 导出 PDF 对比。打印机驱动、用户勾选的「最小边距」、「背景图形」开关，都会让 CSS 失效——唯一能扛住这些的，是结构本身健壮：用 page-break-inside: avoid 锁住关键块，而不是靠 @page { margin: 1cm; } 硬控物理纸张。
