css变量在@media print中不会自动更新，必须在@media print {:root{}}中显式重定义所有影响打印的变量，否则仍使用屏幕端值；调试需强制刷新打印预览并检查元素最终计算值。
为什么 var(--color) 打印出来还是蓝色
CSS 变量在 @media print 中不会自动更新，浏览器只在解析时读取一次变量值，而该值来自屏幕样式中的 :root 声明。哪怕你写了 @media print 块，只要没在里面显式重设 --color，它就永远是 #007bff 这类屏幕端值。
@media print 里必须用 :root 重定义变量
不能写 html { --color: #000; } 或 .report { --color: #000; }，前者因 html 不是继承根（:root 才是），后者作用域太窄、打印时可能不匹配或被级联覆盖。
- 必须写成
@media print { :root { --color: #000; --spacing-unit: 6pt; } } - 所有被
var()引用的变量，只要影响打印输出，就得进这个块里重赋值 - 漏一个变量，比如
--border-color没重设，表格边框就可能还是浅灰甚至透明
调试时最容易忽略的一点：缓存和计算值
Chrome 打印预览会缓存旧 CSS 规则，尤其热更新或动态注入后。改了 @media print { :root { --color: #000; } }，但 DevTools 的 Styles 面板显示的仍是旧值——那不是 bug，是你没强制刷新打印预览。
- 关闭再打开打印预览窗口，才能触发真实重解析
- 真正确诊方式：在打印预览中打开 DevTools → Elements → 选中使用
var(--color)的元素 → 看右侧 Styles 面板里该变量「最终计算出的值」 - 那个值，才是纸面上的颜色；别信屏幕样式里“看起来应该变了”
哪些变量必须进 @media print，哪些根本不用放
不是所有变量都要塞进去。关键看它是否参与打印时的样式计算：
- 必须放：颜色类（
--text-color、--link-color）、间距类（--margin-base、--padding-sm）、隐藏控制类（--print-hidden: none） - 别放：
--hover-bg、--transition-speed、--shadow-depth—— 打印时根本不会触发这些行为 - 组件级变量如
.card { --text-color: #333; }，得在@media print里对.card重设，不能指望:root覆盖
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
