CSS变量无法直接跨iframe同步，因作用域隔离且无自动继承机制；同源下需父页面统一管理并手动注入，跨域则依赖postMessage配合iframe内预置函数或URL/data属性传参。
不能直接同步。CSS 变量（--var-name）作用域绑定在各自的 :root 或选择器上下文中，iframe 之间完全隔离，没有自动继承或广播机制。
同源 iframe 间通过 JavaScript 手动同步变量值
前提是所有 iframe 与父页面同源（协议、域名、端口一致），否则 contentWindow 访问被阻止。
- 父页面统一管理变量状态，例如用
localStorage或全局对象维护{ '--primary-color': '#3b82f6', '--spacing-md': '1rem' } - 每个 iframe 加载后，主动从父页面读取变量：
window.parent.getThemeVars?.()（需父页面暴露该函数） - iframe 内将变量批量注入
:root：document.documentElement.style.setProperty('--primary-color', value) - 避免硬编码 key 列表，推荐父页面返回一个完整对象，iframe 用
Object.entries()遍历设置
跨域 iframe 无法同步 CSS 变量，只能靠约定注入
浏览器禁止跨域 iframe 读写对方 DOM 或 JS 状态，postMessage 可传值，但无法直接修改对方 :root 样式 —— 因为接收方必须自己执行 setProperty，而该操作要求上下文可访问其自身 document。
- 可行路径：父页面在
postMessage中发送变量对象，iframe 内监听并调用自身已定义的applyThemeVars(vars)函数 - 关键前提：iframe 页面必须提前内置该函数，并确保它挂载在
window上（如window.applyThemeVars = (v) => { ... }） - 如果 iframe 完全不可控（如第三方服务），唯一办法是让对方支持通过 URL 参数或
data-属性接收主题配置，再由其内部逻辑解析应用
为什么不能靠 link 共享变量文件？
即使多个 iframe 引入同一份 variables.css，变量仍各自独立作用于本页 :root，无法跨文档响应式联动。
立即学习“前端免费学习笔记（深入）”；
-
@import或<link rel="stylesheet">只负责加载样式规则，不建立运行时变量通信通道 - 修改父页面
:root中的--color-bg，不会触发任何 iframe 内的重计算 - 若需联动，必须显式触发更新（如事件 + JS 调用），而非依赖 CSS 声明本身
最容易被忽略的一点：CSS 变量值一旦设为字符串（如 '1.5em'），就失去单位运算能力；若 iframe 内需要基于该变量做 calc() 计算，务必确保传入的是带单位的原始字符串，而不是数字或无单位值。
