css变量在打印样式中不会自动切换，必须在@media print {:root {}}中显式重定义所有被var()引用的变量，否则沿用屏幕端值；因var()读取的是静态快照而非响应式值，浏览器解析时只取一次作用域内声明，媒体查询不触发变量刷新。
CSS变量在打印样式中不会自动切换，必须在 @media print 块中显式重定义，否则浏览器沿用屏幕端的值——这是所有失效问题的根源。
为什么 var(--color) 打印出来还是蓝色？
因为 var() 读取的是静态快照，不是响应式值。浏览器解析样式时只读一次变量值，@media print 不会触发重计算。如果你只在 :root 定义了 --color: #007bff，但没在 @media print 里重写它，打印时就永远是蓝色。
-
@media print { :root { --color: #000; } }是唯一安全写法；写成html { --color: #000; }无效（html不是变量继承根） - 别在组件内部覆盖，比如
.report { --color: #000; }——打印时该选择器可能不匹配，或被级联规则覆盖 -
--color: #000 !important是语法错误，自定义属性不支持!important
哪些变量必须放进 @media print？
只要在打印样式中被 var() 引用过，就必须确保它在 @media print 中有明确值。漏一个，整块样式就可能错乱。
- 颜色类：
--text-color、--link-color、--border-color - 间距类：
--spacing-unit、--margin-base（建议用pt或mm单位） - 隐藏控制类：
--print-hidden（值设为none，避免和屏幕端display: none冲突） - 别放交互专用变量，比如
--hover-bg或--transition-speed——打印时根本不会触发
调试时最常忽略的关键点
Chrome 打印预览会缓存旧 CSS 规则，尤其在热更新或动态注入样式后。改完 @media print { :root { --color: #000; } }，不强制刷新预览窗口，它就还用老值。
- 必须关闭再打开打印预览，或按
Ctrl+R（Windows）/Cmd+R（Mac）强制刷新 - 别信屏幕样式面板里“看起来变了”，要进打印预览 → DevTools → Elements → 选中元素 → 看右侧 Styles 面板里
var(--color)的最终计算值 - 移动端真机打印一次，比调十分钟预览更有说服力；Safari iOS 和 Chrome for Android 对
@media print解析常有延迟或复用屏幕逻辑
变量本身没有“智能”，它只是被读取的值；真正起作用的是你是否在正确的作用域、正确的时机、用正确的写法把它重新赋值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
