@media print 不能封装为响应式断点混合宏，因其是独立布尔型媒体类型，不支持 min-width 等可变参数；只能封装固定打印样式块（如 print-hide），不可动态生成条件逻辑。
@media print 不能用 SCSS 封装成“自动适配断点”的混合宏——它不是响应式场景，没有屏幕尺寸断点可映射。 所有试图把 @media print 塞进 $breakpoints 映射、再用 @mixin repod-to 调用的写法，最终编译出的 CSS 是无效的：浏览器只认 @media print 这个固定媒体类型，不接受 @media (min-width: 320px) and print 这类非法语法。
为什么不能把 print 当作一个 breakpoint 来封装
SCSS 封装媒介查询的前提是：目标媒体查询支持逻辑组合（如 min-width、orientation），且值可变量化。而 @media print 是一个**独立、不可拆分的媒体类型声明**，它不接收宽度参数，也不参与范围判断。
-
@media print是布尔型媒体查询：要么命中（打印预览/输出时），要么不命中（屏幕浏览时） - 你无法写出
@media (min-width: 768px) and print—— 浏览器直接忽略整条规则 - SCSS 的
@mixin可以包裹@media print内容，但不能“动态生成”它的条件部分
能封装的只有 print 样式块本身（非条件逻辑）
你可以用 SCSS 把常用打印样式组织成可复用的 mixin，但它的作用只是「收拢重复代码」，不是「抽象断点逻辑」。
- 适合封装：隐藏元素、强制黑字、显示 URL、分页控制等固定行为
- 示例：
@mixin print-hide($selectors...)接收选择器列表并统一设为display: none !important - 错误示范：
@mixin for-print('phone')——'phone'在打印上下文里毫无意义
真正该做的：分离 + 显式 + 验证
打印样式必须和响应式逻辑解耦，否则容易误删关键规则或引入冲突。
- 用独立文件：新建
print.scss，只放@media print { ... }块，通过<link rel="stylesheet" href="print.css" media="print">引入 - 显式写死关键修复项：比如
color-adjust: exact三连写，不能靠 mixin 参数推导 - 验证必须手动：Chrome/Firefox/Edge 的打印预览分页逻辑差异极大，
@media print规则生效 ≠ 分页合理；每次改完都要 Ctrl+P 翻页检查
最常被忽略的一点：打印样式不是“写完就跑”，而是“每换一台打印机、每个用户调一次边距设置，就可能失效一次”。@page 边距声明在用户勾选「最小边距」时必然被绕过，唯一靠谱的防线，是把内容结构本身做得足够健壮——比如用 page-break-inside: avoid 锁住表格和图片，而不是指望 CSS 控制物理纸张。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
