CSS变量在打印模式下不显示的原因与解决方法

不少开发者在处理打印样式时，都曾遭遇过一个令人困惑的现象：明明在 @media print 中设置了 --color: #000;，可打印预览里的文字依旧是蓝色。反复检查样式表，变量名没有拼错，代码逻辑也看似无误，但浏览器就是“视而不见”。这并非一个诡异的 bug，根源其实在于 CSS 变量自身的运行机制。

CSS 变量在打印模式下并不会自动切换取值，开发者必须在 @media print 中显式地重新定义变量值，否则它将沿用屏幕端的设定——这一现象并非程序缺陷，而是由浏览器的解析机制决定的。

为什么 var(--color) 打印出来仍是蓝色而非黑色

CSS 变量并不具备类似 JavaScript 变量那样的事件监听或响应能力，@media print 这一媒体查询并不会自动触发变量值的重新计算。浏览器仅在解析样式表时，对 var(--color) 进行一次静态快照读取。此时，你在屏幕样式中已经声明了 :root { --color: #007bff; }，如果在打印媒体查询里没有显式地重新为 --color 赋值，它就会始终沿用屏幕端的蓝色值。

更为常见的“陷阱”在于写法不当。例如：

• @media print { html { --color: #000; } } —— 错误，html 并非继承根节点，必须使用 :root 或 html:root
• .report { --color: #000; } —— 错误，作用域过于狭窄，打印时该选择器可能不匹配，或者被其他级联规则所覆盖
• --color: #000 !important —— 语法错误，!important 不能应用于自定义属性的赋值操作

简而言之，若想在打印模式下改变某个变量的值，就必须在 @media print 代码块中通过 :root 重新声明它，不能依赖作用域继承或权重规则来“走捷径”。

哪些变量必须纳入 @media print 才能确保安全

只要某个变量在打印样式中被 var() 引用过，就必须确保它在 @media print 内拥有明确的赋值。遗漏任何一个，都可能导致整块样式出现错乱。以下几类变量尤其容易引发问题：

• 颜色类变量：如 --text-color、--link-color、--border-color —— 打印输出通常需要黑白配色或低饱和度色彩，若不重写，就会一直沿用屏幕端的花哨配色方案
• 间距类变量：如 --spacing-unit、--margin-base —— 打印时更适合使用 mm 或 pt 等单位，屏幕上的像素值直接照搬很可能导致版面布局失衡
• 隐藏与显示控制类变量：如将 --print-hidden 的值设为 none，用于配合 display 属性隐藏元素。如果不在打印媒体查询中单独定义，屏幕上的某些元素可能会不必要地出现在纸张上
• 避免将交互类变量纳入打印样式：例如 --hover-bg、--transition-speed 等，打印场景根本不会触发这些交互行为，写入其中只会徒增冗余

调试过程中最容易被忽视的一点

Chrome 的打印预览会缓存旧的 CSS 规则，尤其是当你通过热更新或动态注入样式时。即便你已经在 @media print { :root { --color: #000; } } 中写入了正确的赋值，预览窗口可能仍然显示的是旧值。此时，必须强制刷新打印预览（关闭再重新打开），才能看到最新的效果。

最稳妥的调试方法是：打开打印预览后，调出 DevTools（按下 F12）→ 切换到 Elements 面板 → 选中使用了 var(--color) 的元素 → 查看右侧 Styles 面板中该变量的最终计算值。那才是实际输出的颜色，不要被屏幕样式中所显示的“应该变了”的假象所迷惑。

真正容易被忽略的，往往不是变量没有写，而是写了之后却没有验证它在打印上下文中的最终计算值——那个值，才是真正呈现在纸面上的颜色。