PostCSS中需用postcss-custom-properties与postcss-calc插件链处理calc()，前者前置替换var()，后者设preserve: false展开计算，避免嵌套calc()和单位隐式转换问题。
PostCSS 里怎么写 calc() 才不被编译器吃掉
PostCSS 默认不处理 calc() 内部的数学表达式，只当它是普通字符串透传。如果你写了 width: calc(100% - 2rem)，它会原样输出——这没问题；但一旦想用变量或动态值（比如 calc(var(--gap) * 2)），浏览器不支持嵌套函数，而 PostCSS 本身也不解析 calc() 里的运算。
真正要算，得靠插件提前展开。常见错误是直接在 CSS 里写 calc($spacing * 2)（Sass 语法）却没配好预处理器链，结果报错 Unknown word 或样式失效。
- 确保你用的是
postcss-calc（不是postcss-simple-vars单独撑场子） -
postcss-calc默认只展开已知单位和数字的静态计算，比如calc(2px + 4px)→6px；遇到var(--x)或自定义属性时，它默认跳过——必须显式开启preserve: false并配合postcss-custom-properties插件前置执行 - 顺序很重要：
postcss-custom-properties必须在postcss-calc之前，否则变量没替换，calc()里还是var(--gap)，算不动
用 postcss-calc 配合 CSS 自定义属性做运行时计算
浏览器原生 calc() 支持变量，但仅限于加减乘除基础运算，且不能嵌套函数。PostCSS 的作用是在构建时把能确定的部分先算出来，减少运行时负担，同时让写法更接近“真计算”。
典型场景：组件库中根据根字号缩放间距，如 --space-xs: calc(0.25rem * var(--scale, 1))。这个写法在纯 CSS 中无效（calc() 不接受变量参与乘法右侧），但用插件链可以解。
立即学习“前端免费学习笔记（深入）”；
- 安装插件：
npm install postcss-custom-properties postcss-calc --save-dev - 配置顺序示例（PostCSS config）：
module.exports = { plugins: [ require('postcss-custom-properties')({ preserve: false }), require('postcss-calc')({ preserve: false }) ] } -
preserve: false是关键——它让插件把计算结果直接替换掉原始calc()，而不是留着等浏览器跑；设成true就等于没算 - 注意兼容性：
postcss-calc不处理min()/max()，这些得靠postcss-clamp或手动降级
为什么 postcss-math 这类插件很少人用
有人搜到 postcss-math 想直接写 width: math.eval("2 * var(--base) + 1rem")，结果装完就报错 undefined function math.eval。根本原因是它不属于主流 PostCSS 插件生态，不维护、不兼容新版本 PostCSS（尤其 8+），而且设计上违背 CSS 工程化原则：把逻辑塞进样式层，难调试、不可预测。
- 真实项目中，数值逻辑应前置到 JS 或构建脚本（如用
postcss-advanced-variables+ JS 计算后注入），而非在 CSS 里调函数 -
postcss-math对var()解析不稳定，经常把var(--x)当字面量处理，导致计算结果为NaN - 性能上，它比
postcss-calc慢一个数量级，因为要启动 mini JS 引擎解析表达式，CI 构建时容易超时
遇到 calc() inside calc() 报错怎么办
错误信息通常是：Invalid CSS after "...": expected expression, was "calc(1rem + 2px)"。这是 PostCSS 解析器在嵌套 calc() 时挂了，本质是语法非法——CSS 标准不允许 calc(calc(1rem + 2px) * 2) 这种写法，哪怕你只是想“拼字符串”。
- 别硬套嵌套，改用单层：
calc((1rem + 2px) * 2)是合法的，括号只用于分组，不是函数调用 - 如果依赖变量组合，例如
--a: 1rem; --b: 2px;，写成calc(var(--a) + var(--b))，再靠postcss-custom-properties+postcss-calc两级展开 - Webpack/Vite 用户注意：某些 CSS 提取插件（如
mini-css-extract-plugin）会在压缩阶段二次解析 CSS，可能把已展开的calc()又当原文本读，导致重复计算或崩溃——关掉 CSS 压缩里的calc相关优化选项即可
最麻烦的其实是单位混用时的隐式转换，比如 calc(1rem + 1px) 在插件里能算，但 1rem 是相对值，构建时并不知道实际像素，所以算出来的只是“假设 1rem = 16px”下的结果。这点很容易被忽略，直到换了个字体大小，所有间距全乱。
