@media print 是布尔型媒体类型，不支持 min-width 等参数，无法动态封装断点逻辑；sass 仅可用于收拢固定打印样式（如隐藏元素、显示链接 url），不可抽象条件；必须分离文件、显式声明并手动验证。
@media print 不能用 Sass 动态生成断点逻辑，只能静态封装固定样式块。它不是响应式媒体查询，不接受 min-width、orientation 等参数，所有试图把它塞进 $breakpoints 映射或用 @mixin for-print("sm") 的写法，最终编译出的 CSS 是非法且被浏览器忽略的。
为什么 @media print 无法像 @media (min-width: 768px) 那样封装
因为 @media print 是布尔型媒体类型——要么命中（打印预览/输出时），要么不命中（屏幕浏览时）。它不参与范围判断，也不支持逻辑组合。你写不出 @media (min-width: 768px) and print，浏览器直接跳过整条规则。
常见错误现象：
- 编译后 CSS 出现
@media (min-width: 320px) and print—— 无效语法，样式完全不生效 - 用
@mixin repod-to($breakpoint)尝试复用断点逻辑 ——$breakpoint在打印上下文中无意义，语义断裂 - 把
@media print套在@for循环里生成多套规则 —— 不仅冗余，还可能因选择器污染导致意外覆盖
能用 Sass 做的真正有效的事：收拢重复打印行为
Sass 可以帮你把高频使用的打印样式组织成可复用的 @mixin，但只限于「固定行为」，比如隐藏非关键元素、强制黑字、显示链接 URL、控制分页等。它的价值是减少手写重复，不是抽象条件。
实操建议：
- 用
@mixin print-hide($selectors...)统一设display: none !important，传入.ad, .nav, .print-exclude等选择器列表 - 写
@mixin print-url()输出a::after { content: " (" attr(href) ")"; }，避免链接在纸上“消失” - 对表格加
@mixin print-table-break()，内含page-break-inside: avoid和border-collapse: collapse - 别在 mixin 里塞
color-adjust: exact的变体逻辑 —— 它必须显式、三连写（Chrome/Firefox/Edge 实现不一致）
最可靠落地方式：分离文件 + 显式声明 + 手动验证
不要指望 Sass 自动生成“适配打印机”的样式。物理纸张、用户边距设置、PDF 导出引擎都会绕过你的 CSS。唯一可控的是结构健壮性。
推荐做法：
- 新建独立
print.scss，只放一个@media print { ... }块，通过<link rel="stylesheet" href="print.css" media="print">引入 - 所有关键修复项（如
color-adjust: exact、-webkit-print-color-adjust: exact、print-color-adjust: exact）必须手动写出，不可靠 mixin 参数推导 - 每次修改后必须打开 Chrome/Firefox/Edge 的打印预览（
Ctrl+P），逐页翻看分页是否合理 —— 分页逻辑差异极大，CSS 生效 ≠ 排版可用 - 慎用
@page { margin: 1cm; }：用户勾选「最小边距」时该声明必然失效；优先用page-break-inside: avoid锁住表格、图片、卡片等关键区块
最容易被忽略的一点：打印样式不是“一次写完就交付”，而是“每换一台打印机、每个用户调一次边距，就可能崩一次”。Sass 能做的只是让维护成本更低，而不是替你解决物理世界的不确定性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
