CSS变量在@media print中未生效，是因为浏览器仅在解析时读取一次var()的静态快照，必须在@media print中用:root显式重定义所有被引用的变量，并强制刷新打印预览以清除缓存。
为什么@media print里改了:root变量却没生效
因为浏览器在解析样式时只读取一次 var(--color) 的静态值，@media print 块里的 :root 声明必须在打印上下文被实际解析时起效——而它不会“重运行”已计算好的 var()。你写了 @media print { :root { --color: #000; } }，但若该规则加载顺序靠后、被缓存、或未真正注入打印上下文，变量就还是屏幕端的值。
常见错误包括：
- 把
@media print放在 CSS 文件开头，而第三方样式表在后面覆盖了它 - 动态注入样式（如 JS 拼接
<style></style>）但未触发打印上下文重解析 - 用了
html { --color: #000; }——html不是继承根，:root才是
如何确保打印时CSS变量被正确覆盖
关键不是“写没写”，而是“在打印上下文中是否被最终计算为期望值”。最稳妥的做法是：在 @media print 中用 :root 显式赋值，并强制刷新打印预览验证。
- 必须写成
@media print { :root { --color: #000; --spacing-unit: 4pt; --print-hidden: 1; } } - 所有被
var(--xxx)引用的变量，只要影响打印输出，就必须出现在这个:root块里——漏一个，对应样式就可能错乱 - 改完后务必关闭再打开 Chrome 打印预览（Ctrl+P → 关闭 → 再 Ctrl+P），否则缓存会返回旧值
- 调试时直接在打印预览的 DevTools → Elements → 选中元素 → Styles 面板里看
--color的“Computed”值，那个才是纸面上的颜色
哪些变量必须进@media print才安全
不是所有变量都需要进 @media print，只挑那些在打印样式中被 var() 实际引用过的。重点盯三类：
立即学习“前端免费学习笔记（深入）”；
-
颜色与背景控制类：
--color-text、--color-link、--bg-main—— 打印时不设默认黑/白，很可能印成浅灰或留白 -
间距与尺寸类：
--spacing-unit、--margin-base—— 屏幕用rem，打印得切到pt或mm，否则缩放失真 -
显隐开关类：
--print-hidden（值为1表示隐藏）—— 用于配合 class 切换，比硬写display: none更可控
别把 --hover-bg、--transition-speed 这类纯交互变量塞进去，它们在打印时根本不会被读取。
用变量控制隐藏元素时容易踩的坑
想用变量替代 display: none 实现更安全的打印隐藏，不能直接写 CSS 条件表达式（原生不支持），得靠组合策略：
- 声明开关变量：
:root { --print-hide: 0; }，然后@media print { :root { --print-hide: 1; } } - 目标元素不能依赖
var(--print-hide) == 1 ? hidden : visible—— 这是 Sass 语法，浏览器不认 - 正确做法是 JS 监听
matchMedia('print').matches，动态加class="print-hidden"，再用@media print .print-hidden { visibility: hidden; position: absolute; left: -9999px; } - 或者干脆放弃变量，直接在
@media print里写明确选择器：.sidebar, .nav, .ad-banner { display: none; }—— 简单、可靠、无兼容风险
真正容易被忽略的，不是变量没定义，而是定义了却没验证它在打印上下文中的最终计算值——那个值，才是纸面上的颜色和布局。
