css变量打印时仍为蓝色，是因为@media print未显式重定义--color；必须在@media print中用:root { --color: #000; }覆盖，且需强制刷新预览以清除缓存。
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），否则看到的仍是旧值。
更隐蔽的是：某些构建工具（如 Vite + PostCSS）会在生产环境下移除未使用的@media print规则——检查最终生成的 CSS 文件里是否真有那段:root重定义，而不是只在源码里写了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
