必须进computed面板查看calc()中变量的最终计算值，styles面板仅显示变量原始定义（如1rem），computed中展开对应属性（如top、color）才显示渲染后具体像素或颜色值（如32px、rgb(59,130,246)）。
Chrome DevTools 中查 calc() 里变量的最终结果
直接看 var(--size) 的原始定义没用，真正要确认 calc(var(--size) * 2) 算出来多少像素，必须进 Computed 面板。Styles 面板里鼠标悬停显示的「Computed value」只是变量字面值（比如 1rem），不是运算后结果。
操作路径：Elements → 选中目标元素 → 右侧 Computed 标签页 → 展开你用了 var() 的属性（如 top、margin、background-color）→ 右侧显示的才是浏览器实际渲染值（如 32px 或 rgb(59, 130, 246)）。
- 常见错误：变量定义在
:root，但子元素被局部color覆盖，导致var(--color-primary)在color属性里失效——Computed 面板里该属性会显示初始值，而不是变量值 - 注意继承链影响：
--size是1rem，但父元素font-size改了，最终计算值就变——只有 Computed 面板能反映这个动态结果 - Safari 对嵌套
calc(calc())支持不稳定，建议扁平化写法，比如用calc(var(--a) + var(--b))而非calc(calc(var(--a) * 2) + var(--b))
用 getComputedStyle 拿运行时已计算的属性值
getComputedStyle(el).getPropertyValue('--var-name') 返回的是未解析的原始字符串（比如 "#3b82f6"），不是 calc() 后的结果。真要读最终值，必须指定具体 CSS 属性名：
- 查颜色：用
getComputedStyle(el).color（返回"rgb(59, 130, 246)"） - 查边距：用
getComputedStyle(el)['margin-top']（返回"24px"） - 查背景：用
getComputedStyle(el).background（返回完整字符串，如"rgb(59, 130, 246) none repeat scroll 0% 0%"） - 别用
el.style.getPropertyValue()，它只读内联样式，不包含继承或计算结果
VSCode 里根本看不到计算值
VSCode 是编辑器，不是渲染引擎。所有声称“预览 CSS 变量值”的插件，本质都是字符串替换或调用外部服务，和真实浏览器行为无关。你看到的 --spacing-md: 16px 永远只是文本，不会变成 24px（当父级 font-size 变成 1.5rem 时）。
它唯一能帮你的，是快速跳转到变量定义（Ctrl+Click）、语法高亮、避免拼写错误。但作用域问题（比如某个 div 里覆盖了同名变量）、继承链中断、!important 对 fallback 生效但对变量本身无效——这些全得靠浏览器 DevTools 实时验证。
JavaScript 动态改变量后怎么验证效果
用 element.style.setProperty('--color', '#ff6b6b') 修改后，别只信 Styles 面板里变量值变了，要立刻看 Computed 面板对应属性是否同步更新。常见静默失败原因：
- 漏掉
--前缀，写成'color'而不是'--color' - 传入数字没转字符串，比如
root.style.setProperty('--size', 16)→ 应为'16px' - 作用域错配：想改全局却调用了某个组件元素的
style.setProperty()，而该元素自己声明了同名变量，优先级更高 - 清除变量用
element.style.removeProperty('--var-name')，不是设为空字符串
复杂点在于：CSS 变量的“计算值”不是一次求值就固定，它随容器尺寸、字体缩放、媒体查询实时重算。你看到的 Computed 值，永远只是当前快照——换设备、切窗口大小、开暗色模式，都可能让它变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
