css变量在打印预览中不更新，因浏览器仅解析一次且不跨媒体查询同步；必须在@media print中显式重定义:root变量，否则沿用原值。
CSS变量在打印预览里“没变”，不是消失了，而是压根没被重定义——浏览器只读一次值，且不跨媒体查询自动同步。
为什么 var(--color) 打印出来还是蓝色
CSS变量没有响应式能力，@media print 不会触发变量值更新。浏览器解析样式时，var(--color) 只是替换成当前作用域下最后一次声明的值；如果 :root 里只写了 --color: #007bff，而 @media print 里没重写它，那打印时就永远是蓝色。
- DevTools 的 Styles 面板在打印预览模式下显示的计算结果，才是真实生效值——别信屏幕样式里“看起来应该变了”
-
:root中定义的变量必须在@media print块内显式重声明，例如：@media print { :root { --color: #000; } } - 不能写成
@media print { html { --color: #000; } }：html不是变量继承根，:root或html:root才对 - 避免在组件内部零散覆盖，比如
.report { --color: #000; }：打印时该选择器可能不匹配，或级联优先级不够 - 变量赋值不能加
!important：--color: #000 !important是非法语法
@media print 里变量覆盖失败的典型写法
看似写了重定义，实际没生效，往往卡在作用域或顺序上：
- 把
@media print { :root { --color: #000; } }写在了其他同名变量声明之后，但前面已有更高权重规则（如内联样式、JS 注入类）抢先锁定了值 - 多个文件分散定义：主样式表里
:root { --bg: white; }，组件样式里又写@media print { .card { --bg: #fff; } }——作用域太窄，且未覆盖所有使用点 - 用了 CSS-in-JS 库（如 styled-components），但没配置 print 媒体类型支持，导致
@media print规则根本没注入到 DOM
哪些变量必须进 @media print 才安全
只要在打印样式中被 var() 引用过，就得确保它在 @media print 中有明确值——漏一个，整块样式就可能错乱。
- 颜色类：
--text-color、--link-color、--border-color - 间距类：
--spacing-unit、--margin-base（打印常用 mm 或 pt 单位，别混用 rem） - 隐藏/显示控制类：
--print-hidden（值设为none），避免和屏幕端display: none冲突 - 别把
--hover-bg或--transition-speed放进去：它们只在交互场景用，打印时根本不会触发
调试时最容易忽略的一点
Chrome 打印预览会缓存旧的 CSS 规则，尤其当你动态注入或热更新样式时。哪怕你改了 @media print 里的变量声明，也得强制刷新打印预览（关掉再开，或按 Cmd+R/Ctrl+R），否则看到的仍是旧值。
真正容易被忽略的是：变量值一旦在页面加载时被 var() 解析完成，就不会再随媒体查询切换而重新求值——它不是“活”的，只是文本替换。所以，打印样式是否生效，只取决于你有没有在 @media print 里提供那个变量的最终声明，且该声明能被浏览器正确读取并应用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
