根本原因是Markdown渲染器（如vue-stream-markdown、VS Code预览）将HTML注入独立容器或iframe，导致CSS变量无法继承:root作用域；流式渲染时DOM不完整使var()静默回退；PDF导出等场景下变量被忽略或降级。
CSS变量在Markdown渲染区域里表现不一致，根本原因不是变量本身失效，而是渲染器（如vue-stream-markdown、VS Code 预览、Pandoc 输出）对 CSS 变量的解析时机、作用域隔离和 DOM 注入方式与常规 HTML 页面完全不同——变量常被“卡在中间”，既没被继承，也没被注入到有效上下文。
Markdown 渲染器会剥离 :root 作用域
大多数 Markdown 渲染库（包括 vue-stream-markdown、marked、VS Code 内置预览）默认将解析后的 HTML 片段插入到一个独立容器（如 <div class="markdown-body">）中，且**不保证该容器位于 <html> 下或继承 :root 声明**。
- 即使你在全局
:root定义了--text-color: #1e293b，渲染器生成的<p>标签若被挂载到 Shadow DOM 或 iframe 中，就完全查不到这个变量 - VS Code 的 Markdown 预览使用沙盒化 iframe，其
<html>是独立文档，:root变量必须显式注入到该 iframe 的<style>或通过document.documentElement.style.setProperty()动态写入 - 解决方案：不要依赖外部
:root，改用内联 style 或为渲染容器加 class 并在该选择器下重声明变量，例如：.markdown-body { --text-color: var(--text-color, #1e293b); }
流式渲染期间 DOM 不完整，var() 静默回退
像 vue-stream-markdown 这类逐字符/逐段注入的渲染器，在内容未完全到达前，DOM 节点是半开闭状态（比如 <strong>加粗 还没遇到 </strong>），此时浏览器无法解析 var(--accent)，直接按无效值处理，回退到初始色或继承色，造成闪烁或错色。
- 常见现象：加粗文字一开始是黑色，等整段渲染完才变蓝；代码块背景色延迟生效
- DevTools 中悬停
var(--bg)显示 “unresolved”，但控制台无报错——这是典型静默失败 - 规避方法：避免在流式场景中用变量控制
color以外的属性；若必须用，等@done事件触发后再统一 setProperty，而不是边渲染边更新
PDF/打印导出时变量被忽略或降级
Pandoc + XeLaTeX 或浏览器“另存为 PDF”时，CSS 变量基本不生效——LaTeX 引擎不解析 CSS，而 Chromium 的打印引擎对 var() 支持极弱，尤其嵌套或带函数的用法（如 background: linear-gradient(var(--start), var(--end))）会被整条丢弃。
立即学习“前端免费学习笔记（深入）”；
- 实测：Chrome 打印预览中
color: var(--primary)可能生效，但border-color: var(--primary)常回退为currentColor - 安全做法：PDF 场景下放弃 CSS 变量，改用预编译值（如 PostCSS 插件
postcss-custom-properties将var(--primary)替换为#3b82f6） - 若用 VS Code 预览导出 PDF，需确保
markdown-preview.css中所有var()已被静态值替代，否则导出后全是默认灰黑
最易被忽略的一点：变量在 Markdown 渲染区域里从来不是“全局可用”的。它依赖渲染器是否把你的样式注入到正确上下文、是否等 DOM 稳定后再计算、以及目标输出介质（屏幕/iframe/PDF）是否真正支持。别假设它和普通页面一样可靠——先确认渲染器文档是否明确支持 CSS 变量，再决定是绕过它、预编译它，还是干脆不用。
