PostCSS 不能处理 sin()、cos() 等三角函数，因其不属于属性前缀或选择器语法，autoprefixer 和 postcss-preset-env 均不解析降级；旧引擎将含此类函数的声明整条丢弃，须手动计算结果或用 JS 运行时注入。
PostCSS 能不能处理 sin()、cos() 这类三角函数？
不能。PostCSS 本身不识别、不解析、也不降级 sin()、cos()、tan()、clamp() 等数学函数——它们属于 CSS 新增语法特性，不是属性前缀或选择器语法，autoprefixer 和 postcss-preset-env 默认都不碰。
错误现象：你在 CSS 里写了 height: calc(tan(30deg) * 100px)，构建后 IE11 或 Android 4.4 WebView 直接跳过整条规则，元素高度塌陷为默认值。
根本原因：这些函数在旧引擎中是非法 token，CSS 解析器遇到就丢弃整条声明，连 fallback 都没机会触发。
postcss-preset-env 对数学函数的支持边界在哪？
postcss-preset-env 在 stage: 3 下只处理部分语法糖（比如嵌套、@layer），但明确不转换数学函数。即使你配了 targets: { ie: '11' }，sin() 依然原样输出。
立即学习“前端免费学习笔记（深入）”；
它能做的仅限于：
- 把
clamp(1rem, 2vw, 1.5rem)当作普通值保留，不报错也不拆解 - 对
min()/max()同样不干预——它们和calc()同属“运行时计算”，无法静态求值 - 不会尝试把
tan(30deg)替换成0.577，因为这需要数学计算能力，不是字符串替换
所以别指望插件链自动“翻译”三角函数，它连 calc(var(--gap)) 都处理不了，更别说带函数调用的嵌套表达式。
真实可用的降级方案只有两种
第一种：手动写死计算结果 + @supports 分层（仅适用于角度/参数固定场景）
@supports (height: clamp(1rem, 1vw, 1.5rem)) { .box { height: clamp(1rem, 2vw, 1.5rem); } }
.box { height: 1.25rem; /* fallback for IE */ }
第二种：JS 运行时注入（推荐用于动态角度或响应式斜率）
- 用
Math.tan()算出数值，再通过el.style.height设置 - 配合
CSS.supports('height', 'clamp(1rem, 1vw, 1.5rem)')做环境判断 - 避免用
CSS.supports('clamp()')—— 语法错误，会抛TypeError
注意：@supports 本身 IE 全系不支持，所以纯 CSS 方案必须靠层叠顺序兜底，不能依赖它包裹降级样式。
为什么不要在 calc() 里混用 var() 和三角函数？
比如 width: calc(sin(var(--angle)) * 100px) —— 这种写法三重失效：
-
postcss-custom-properties设preserve: false也只替换var(--angle)，留下sin(30deg)，旧浏览器仍报错 -
postcss-preset-env不识别函数内嵌变量，直接跳过整条规则 - 就算你手动替换成
sin(30deg)，IE 仍静默丢弃，因为sin()是未定义函数
真正能落地的做法只有一个：把角度值写死，把函数结果算出来，硬编码进 CSS。动态需求交给 JS，别强塞给构建工具。
