CSS变量在打印时不会自动切换，必须在@media print中显式重定义，否则沿用屏幕端值；浏览器解析样式时仅读取一次var()的静态快照，未在print中重赋值则始终为原值。
CSS变量在打印时不会自动切换，必须在@media print中显式重定义，否则沿用屏幕端值——这是根本原因，不是bug。
为什么var(--color)打印出来还是蓝色而不是黑色
CSS变量没有监听能力，@media print不会触发变量值更新。浏览器只在解析样式时读取一次var(--color)，而此时作用域里只有:root { --color: #007bff; }这一条声明。即使你写了@media print块，只要没在里面重新赋值--color，它就永远是蓝色。
常见错误写法：
-
@media print { html { --color: #000; } }：错，html不是继承根，得用:root或html:root -
.report { --color: #000; }：错，作用域太窄，打印时该选择器可能不匹配，或被级联规则覆盖 -
--color: #000 !important：语法错误，!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放进去：它们只在交互场景用，打印时根本不会触发
调试时最容易忽略的一点
Chrome 打印预览会缓存旧的 CSS 规则，尤其当你动态注入或热更新样式时。哪怕你改了@media print { :root { --color: #000; } }，DevTools 的 Styles 面板在打印预览下显示的var(--color)计算结果，才是真实生效值——别信屏幕样式里的“看起来应该变了”。必须强制刷新打印预览（关闭再打开），才能看到最新效果。
最稳妥的调试方式：在打印预览中打开 DevTools → Elements → 选中使用var(--color)的元素 → 看右侧 Styles 面板里该变量最终计算出的值，它才是实际输出的颜色。
