<p>不能。PostCSS仅处理静态CSS文本，无法解析运行时var()值，不支持calc(var() * 2)等动态计算，仅适用于纯静态变量预替换场景。</p>
PostCSS 能不能直接计算 CSS 变量值？
不能。PostCSS 本身不解析运行时的 var(--color)，它只处理静态 CSS 文本。你写的 calc(var(--size) * 2) 在 PostCSS 阶段根本不会被展开——浏览器都还没出场，变量值更是无从得知。
所以别指望靠 postcss-custom-properties 或类似插件“算出结果”。它最多把 :root 里定义的 --size: 16px 提取出来，再替换掉同文件中出现的 var(--size)；一旦变量值来自 JS 动态设置、或跨 scope（比如 shadow DOM）、或用了 calc() 嵌套，它就彻底失效。
常见错误现象：
- 开发时看到样式生效了，打包后变灰/错位
- postcss-custom-properties 报 warning “Unable to parse variable value”
- 替换后单位丢失（var(--gap) → 8，缺了 px）
哪些场景下可以用 PostCSS 预处理 CSS 变量？
仅限纯静态、可提前确定全部依赖关系的项目，比如设计系统文档站、主题预编译脚本、或完全由 CSS 控制的主题切换（无 JS 干预）。
使用场景示例：
- 多主题色值统一管理：所有 --primary 来自一个 tokens.css 文件，构建时批量注入到各组件 CSS 中
- 移动端断点缩放：用 --scale: 0.875 配合 transform: scale(var(--scale))，且该值在构建时已固定
实操建议：
- 用 postcss-custom-properties + preserve: false 强制替换（默认是 true，会保留原始 var() 作 fallback）
- 所有变量定义必须在同一个 CSS 文件或通过 @import 显式引入，不能靠 HTML 中的 style 标签注入
- 避免在变量值里写 calc()，例如 --width: calc(100% - 2rem) —— 大部分 PostCSS 插件无法安全解析这种嵌套
想实现动态计算逻辑，该转向哪里？
得交给运行时处理，而不是构建时。PostCSS 不是计算器，它是文本转换器。
立即学习“前端免费学习笔记（深入）”；
可选路径：
- JS 直接操作 document.documentElement.style 设置变量，配合 calc() 让浏览器算（最轻量、兼容性好）
- 使用 css-vars-ponyfill 补丁旧浏览器，它会在 JS 层模拟变量行为，支持部分动态更新
- 如果用 React/Vue，封装一个 useCssVar Hook 或指令，把计算逻辑收口在组件内部，避免全局污染
性能影响注意点：
- 频繁修改 document.documentElement.style 会触发重排，别在 scroll/touchmove 里直接设 --x
- css-vars-ponyfill 在 IE11 下遍历所有 CSSRule，页面样式表越大越慢
- 不要用 JS 把整套 CSS 字符串拼出来再注入 <style>，破坏缓存且难调试
为什么有人误以为 PostCSS 能“计算”变量？
因为混淆了两个不同阶段：PostCSS 处理的是源码字符串，而 CSS 变量的实际求值发生在浏览器渲染管线里，且依赖当前元素的 computed style、继承链、甚至媒体查询匹配状态。
容易踩的坑：
- 在 PostCSS 插件里试图读取 window.getComputedStyle —— 构建时根本没有 window
- 用 postcss-calc 去处理 calc(var(--a) + 1px)，但它只认字面量数字，不认识 var()
- 把 Sass/Less 的变量思维直接平移过来，忘了 CSS 自定义属性本质是运行时 API，不是预处理器宏
真正要做的，是分清边界：PostCSS 负责把设计 token 转成可交付的 CSS；浏览器负责根据上下文把 var() 算出最终像素值；JS 负责在必要时干预这个过程。
复杂点在于，三者边界不是一刀切的——比如 dark mode 切换时，你既可能靠 media query + CSS 变量自动响应，也可能需要 JS 触发 class 切换再配合变量重置。这时候，PostCSS 就只该管“默认值怎么生成”，别碰“怎么切”。
