不能直接在scss里写纯@media print块，因其仅为静态包裹，无法参数化、复用或动态注入；多组件适配时易致维护散乱、遗漏难查、断点不统一，须用@mixin封装逻辑以保障可维护性与一致性。
为什么不能直接在 SCSS 里写 @media print 块？
因为纯 @media print 块在 SCSS 中只是静态包裹，无法参数化、无法复用、无法随主题或设备条件动态注入。当你有多个组件（如卡片、表格、表单区）都需要各自适配打印逻辑时，复制粘贴 @media print { ... } 会导致维护散乱、遗漏难查、响应式断点不统一。
@mixin print-only：封装最简隔离逻辑
适合只隐藏/显示某类元素的场景，比如全局关掉导航、按钮、图标——它不改布局，只做“开关”：
- 必须用
display: none !important，否则第三方样式或框架（如 Bootstrap）的权重可能覆盖它 - 别写
visibility: hidden，它保留盒模型，会撑出空白页 - 推荐白名单式调用：
@include print-only(".navbar, .btn, .ads");，避免通配符误杀img或table
示例定义：
@mixin print-only($selectors) {
@media print {
#{$selectors} {
display: none !important;
}
}
}
@mixin print-layout：处理分页与结构重置
当内容跨页断裂、浮动错位、flex 排列异常时，这个 mixin 要接管容器级行为：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 对目标容器加
break-inside: avoid !important，防止标题和首段被拆开 - 强制清除浮动：
float: none !important必须作用于body或根容器，不然子元素仍可能堆叠 - 慎用
display: block !important直接覆盖 flex 容器——先判断是否真需要降级，有些卡片用flex-direction: column更稳 - 别在 mixin 里写
@page { margin: 1cm; }，@page是顶层规则，SCSS 编译后若嵌套在@media print内会失效
示例调用：
.report-card {
@include print-layout;
}
// 输出包含：
// @media print {
// .report-card {
// break-inside: avoid !important;
// }
// body {
// float: none !important;
// }
// }
调试时最容易漏掉的三件事
SCSS 编译后，打印样式失效往往不是语法错，而是上下文被吃掉：
-
@media print规则必须出现在最终 CSS 的顶层作用域，不能被@if或外层@media包裹，否则浏览器直接忽略 - 如果用了 CSS-in-JS（如 Emotion、styled-components），默认不注入
print媒体类型，得显式传media: "print"选项 - Chrome 打印预览里按
Cmd+Shift+P→ “Emulate CSS media type” 可切换，但分页线不准；真机 Ctrl+P / Cmd+P 才是唯一可信验证方式
真正麻烦的是：@mixin 封装后，错误会藏得更深——一个参数单位写错（比如传 16 没带 px），编译不报错，但 margin: 16 在打印里变成无效值，整块排版偏移却找不到源头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
