CSS变量打印时不会自动切换，必须在@media print中对每个被引用的变量显式重赋值；浏览器仅在初始解析时计算一次var()值，未重定义则沿用屏幕端结果。
CSS变量在打印时不会自动切换值，必须在 @media print 中对每个用到的变量显式重赋值，否则浏览器沿用屏幕端解析出的静态快照——这不是 bug，是规范行为。
为什么 var(--color) 打印出来还是蓝色而不是黑色
浏览器只在初始样式解析阶段读取一次 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 面板里该变量最终计算出的值，它才是实际输出的颜色
变量集中管理与作用域陷阱
分散声明变量会让维护失控。比如你在组件里写 .card { --padding: 1rem; }，又在 @media print { .card { --padding: 0; } } 里覆盖，但打印时若该元素未命中 .card 选择器（比如被包裹在 div#app 下且未透传），变量就不会更新。
- 所有需切换的变量应统一声明在
:root，并在@media print中用:root重置 - 避免在多个选择器中重复设置同一变量，这会让调试变成猜谜
- 命名建议带语义前缀，如
--print-text-color，而非依赖上下文推断
真正容易被忽略的是：变量不是响应式状态，而是静态快照；你写的每一行 var()，背后都是一次不可逆的求值。打印样式不是“换肤”，是“重绘”。
