CSS变量打印时仍为蓝色，是因为@media print未显式重定义--color；必须在@media print中用:root { --color: #000; }覆盖，且需强制刷新预览以清除缓存。
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 面板里该变量最终计算出的值，它才是实际输出的颜色
真正容易被忽略的，不是变量没写，而是写了却没验证它在打印上下文中的最终计算值——那个值，才是纸面上的颜色。
