safari 15.4前calc()嵌套会静默丢弃整条规则，应改用css变量拆解；变量必须带单位，否则calc()加减失效；postcss不自动展开calc内var()，需手动转为静态值；乘除运算中右操作数须为无单位数字。
calc()里嵌套另一个calc()在Safari 15.4之前会静默丢弃整条规则
这不是报错，而是浏览器直接跳过该CSS声明——DevTools里显示Invalid property value，控制台却没提示。你在Chrome调好后切到iOS 15.3真机，布局就塌了，但找不到源头。旧版WebKit（如Android 4.4 WebView）只认最简形式：calc(100% - 20px)可以，calc(calc(100% - 20px) / 2)会被整个忽略。
解决方式不是“修语法”，而是拆掉嵌套：
- 把中间结果存成CSS变量，比如
--inner-width: calc(100% - 40px) - 再用
width: calc(var(--inner-width) / 3)引用它 - 这个写法在Safari 12+、Chrome 49+、Firefox 31+全部生效，比嵌套兼容范围大得多
变量值没带单位导致calc()加减运算静默失效
var(--gap)在calc()中参与加减时，如果--gap: 20（无单位），浏览器无法判断结果该是20px还是20%，直接丢弃整条声明。连0都必须写成0px或0rem，否则calc(var(--offset) + 10px)照样失效。
正确做法是让变量自带单位，或用乘法“升格”：
-
--gap: 20px→margin: calc(100% - var(--gap)) -
--scale: 1.2→font-size: calc(var(--scale) * 1rem) -
--offset: 0px→left: calc(var(--offset) + 10px)
PostCSS降级时calc()里的var()不会被自动展开
postcss-custom-properties默认只处理顶层var(--x)声明，对calc(var(--gap))这种嵌套引用不识别。如果你开了preserve: false，它只会把background: var(--primary)替换成background: #007bff，但width: calc(100% - var(--gap))原样保留——IE和老旧WebView依然会跳过整条规则。
必须手动拆解：
- 把
--gap定义为静态常量（如--gap: 20px） - 改写为
--inner-width: calc(100% - 20px)（去掉var） - 再在使用处写
width: var(--inner-width) - 这样PostCSS才能真正替换掉所有
var()，不留运行时依赖
乘除运算中左右操作数的单位约束容易被忽略
calc()乘除不是任意混算：右侧必须是纯数字，左侧可以是带单位值。写成calc(var(--width) * 2px)语法错误；calc(100vh / var(--rows))要求--rows: 4，不能是--rows: 4px。
常见陷阱：
-
--width: 200px✅ →width: calc(var(--width) * 2) -
--rows: 3✅ →grid-template-rows: repeat(var(--rows), 1fr) - 别用
var(--x) + var(--y)做加减，除非两者单位完全一致（如都是px）
真正难防的是：你改了--gap的定义，却忘了检查所有calc()引用是否还满足单位、空格、插值三重约束——尤其当变量被多个组件复用时，一处漏改，全盘失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
