CSS变量不会随@media print自动切换，必须在:root中显式重声明；需配合color-adjust: exact使用，并避免rgba/hsl等兼容性差的值。
CSS变量本身不会随@media print自动切换，必须显式重声明才能生效——这不是bug，是设计使然。
为什么--primary-color在打印时还是蓝色？
CSS自定义属性是静态值，浏览器在解析时只读取一次。你在:root里写--primary-color: #007bff，打印引擎照样用这个值，哪怕你希望它变黑。它不感知媒体查询，也不“响应”切换。
- 检查 DevTools → Styles 面板，在打印预览模式下直接看
var(--primary-color)计算出的最终色值，确认是否被覆盖 - 别把变量定义分散在组件内部（如
.card { --padding: 1rem; }），否则@media print里很难精准覆盖 - 所有需切换的变量（
--text-color、--border-color、--link-color）必须成对出现在:root和@media print { :root { ... } }中
如何安全地在@media print中重设变量？
变量重设必须写在:root作用域内，且不能依赖继承或级联。例如：
:root {
--text-color: #333;
--bg-color: #fff;
--link-color: #007bff;
}
<p>@media print {
:root {
--text-color: #000;
--bg-color: #fff;
--link-color: #000;
}
}- 不要用
* { --x: y; }兜底：Firefox 对通配符支持不稳定，且拖慢解析 - 避免在
@media print里只改部分变量（比如漏了--border-color），会导致样式不一致 - 若用 CSS-in-JS（如 styled-components），确认其构建流程支持
print媒体类型，否则规则压根不会注入
color-adjust: exact和变量必须配合使用
即使--text-color在@media print里已重设为#000，如果元素没加color-adjust: exact，Chrome/Edge 仍可能启用color-adjust: economy强制转灰度。
立即学习“前端免费学习笔记（深入）”；
-
color-adjust不继承，必须写在具体元素上：.invoice-header { color: var(--text-color); color-adjust: exact; } - 别指望
body { color-adjust: exact; }能覆盖子元素——得每个用到颜色的地方都加，或用足够具体的选择器批量命中 - 变量值尽量用十六进制或命名色（
#000、black），避开rgba()、hsl()、currentColor等打印兼容性差的写法
容易被忽略的兼容性陷阱
变量在打印上下文中的行为比想象中更脆弱：构建工具可能提前展开变量，但某些 CSS-in-JS 库或旧版浏览器（如 Safari 15.6 打印引擎）根本不识别未展开的var(--x)。
- Vue 的
<style scoped>会加属性选择器，可能让@media print规则失效，优先用非 scoped 或全局 class - Webpack/Vite 构建后若变量未被编译为实际值（比如用了
postcss-custom-properties但未配置preserve: false），打印时就只剩var(--x)字符串 - 测试不能只信 Chrome 打印预览——它只是渲染快照；务必用真实打印机输出，尤其检查 HP/Canon 企业驱动是否锁定“灰度模式”
