CSS变量在@media print中不会自动切换，必须显式重定义：@media print { :root { --color: #000; } }，否则沿用屏幕端值；调试需强制刷新打印预览。
var() 读取的不是“实时响应值”，而是当前计算上下文中的静态快照——@media print 里不重定义变量，它就沿用屏幕端的值，打印时自然不会变。
为什么 var(--color) 打印出来还是蓝色而不是黑色
CSS 变量没有监听能力，@media print 不会自动切换变量值。浏览器只在解析样式时读一次 var(--color)，而此时作用域里只有 :root { --color: #007bff; } 这一条声明。
- 必须在
@media print块内显式重写--color，例如：@media print { :root { --color: #000; } } - 不能只改某个组件内部的变量，比如
.report { --color: #000; }，因为打印时该选择器可能不匹配或级联失效 - DevTools 的 Styles 面板在打印预览下显示的
var(--color)计算结果，才是真实生效值——别信屏幕样式里的“看起来应该变了”
@media print 中变量覆盖失败的常见写法
看似写了重定义，实际没生效，往往卡在作用域或顺序上：
- 写成
@media print { html { --color: #000; } }：错，html不是变量继承根，得用:root或html:root - 在多个地方分散定义，如
:root { --bg: white; }和@media print { .page { --bg: #fff; } }：错，.page作用域太窄，且未覆盖所有使用点 - 把变量定义放在
@media print块末尾，但前面已有同名规则被更高优先级样式覆盖：变量级联按顺序，后声明才生效 - 用了
!important在变量赋值里：无效，--var: val !important是语法错误
哪些变量必须进 @media print 才安全
只要在打印样式中被 var() 引用过，就得确保它在 @media print 中有明确值——漏一个，整块样式就可能错乱。
- 颜色类：
--text-color、--link-color、--border-color - 间距类：
--spacing-unit、--margin-base（打印常用mm或pt单位） - 隐藏/显示控制类：
--print-hidden（值设为none），避免和屏幕端display: none冲突 - 别把
--hover-bg或--transition-speed放进去：它们只在交互场景用，打印时根本不会触发，放进@media print只是徒增维护负担
调试时最容易忽略的一点
Chrome 打印预览会缓存旧的 CSS 规则，尤其当你动态注入或热更新样式时。哪怕你改了 :root 里的变量，预览窗口不刷新，它就还用老值。强制刷新预览窗口（Windows 是 Ctrl+R，Mac 是 Cmd+R）比反复检查代码更有效。
立即学习“前端免费学习笔记（深入）”；
