浏览器初始解析时只计算一次var()值，打印样式中必须用@media print {:root{--var:value}}重定义所有需变更的变量，否则沿用屏幕端值；调试应以打印预览中的computed值为准。
浏览器只在初始解析时计算一次 var() 的值
你写了 :root { --text-color: #007bff; }，又在 @media print { :root { --text-color: #000; } } 里重定义，但打印出来还是蓝色——不是 CSS 没加载，而是浏览器早在页面渲染初期就完成了所有 var() 的求值，之后无论 @media print 里怎么改变量，已计算出的样式值（比如 color: var(--text-color) → color: #007bff）不会再重新计算。
这行为符合 CSS 自定义属性规范，不是 bug，是设计使然。相当于把 var(--text-color) 当作一个“快照”，而不是实时引用。
@media print 中必须对每个被引用的变量显式重赋值
漏掉任何一个在打印样式中出现过的变量，它就会沿用屏幕端的值，导致整块样式错乱。常见必须覆盖的变量包括：
-
--text-color、--border-color、--bg-color（颜色类，打印时建议设为#000或#333） -
--spacing-unit、--margin-base（间距类，推荐用pt或mm单位，如4pt） -
--print-hidden（值设为none，用于控制打印时隐藏某些元素）
别把 --hover-bg、--transition-speed 这类只在交互中生效的变量放进 @media print，它们根本不会被读取。
立即学习“前端免费学习笔记（深入）”；
作用域和选择器写法极易踩坑
以下写法全部无效：
-
@media print { html { --text-color: #000; } }——html不是继承根，变量不会透传到后代 -
@media print { .report { --text-color: #000; } }—— 打印时该元素可能未命中.report（比如被包裹在#app下且未透传） -
--text-color: #000 !important——!important不能用于自定义属性声明，语法错误
正确做法只有一种：@media print { :root { --text-color: #000; } }。所有需切换的变量必须统一声明在 :root，并在 @media print 中用 :root 重置。
调试时最常忽略的缓存与验证方式
Chrome 打印预览会缓存旧的 CSS 规则，哪怕你改了 @media print { :root { --text-color: #000; } }，DevTools 的 Styles 面板在普通视图下显示的值仍是屏幕端结果。
真实生效值只能这样验证：
- 打开打印预览（
Ctrl+P或Cmd+P） - 右键目标元素 → “检查”
- 在 Elements 面板中选中该元素，看右侧 Styles 面板里
var(--text-color)最终计算出的值 - 如果仍显示
#007bff，说明:root在@media print中没生效，或被其他规则覆盖
强制刷新打印预览（关闭再打开）比热更新更可靠；别信“看起来应该变了”，只信打印预览里 DevTools 显示的 computed 值。
