calc()乘除运算必须满足单位约束：乘法右侧、除法右侧须为无单位数字，变量值必须自带单位或为纯数字，否则整条规则静默失效。
纯 CSS 没有 if、没有布尔运算、也没有运行时逻辑分支——var() 只传值，calc() 只算数，所有“复杂”都得靠数值建模和单位约束来硬解。
calc() 里怎么写乘除才不静默失效
浏览器对 calc() 的语法极其苛刻，错一个空格或单位就整条规则丢弃，且控制台零提示。
-
calc(var(--gap) * 2)✅ ——--gap必须是带单位的值（如20px），右侧乘数必须无单位 -
calc(var(--gap) * 2px)❌ —— 乘号右边不能带单位，会直接失效 -
calc(var(--gap)+var(--pad))❌ —— 加号前后缺空格，整条声明被忽略；正确写法是calc(var(--gap) + var(--pad)) - 除法同理：
calc(var(--width) / 4)✅，calc(var(--width) / 4px)❌
用 0/1 开关模拟布尔逻辑的边界在哪
你可以把 --is-active: 1 当 true，--is-active: 0 当 false，再用乘法控制样式开关，但这只适用于线性可叠加的属性。
- 适用：字体粗细
font-weight: calc(400 + var(--is-active) * 300)、透明度opacity: calc(0.3 + var(--is-hover) * 0.7) - 不适用：
display、visibility、pointer-events—— 这些属性不接受数值结果，calc(0 * 999)不等于none - 别嵌套：
calc(var(--is-dark) * calc(255 - var(--r)))在 Safari 15.4 之前完全不识别，且无法调试
多个变量组合计算时，为什么中间变量比嵌套 calc() 更可靠
浏览器对 calc() 嵌套支持参差不齐，而中间变量既提升可读性，又规避兼容性雷区。
立即学习“前端免费学习笔记（深入）”；
- 危险写法：
width: calc(calc(100% - var(--sidebar)) / var(--col-count))—— Safari ≤15.3、旧版安卓 WebView 直接跳过整条规则 - 安全写法：先定义
--content-width: calc(100% - var(--sidebar))，再用width: calc(var(--content-width) / var(--col-count)) - 注意：
var(--col-count)必须是纯数字（如3），不能是3px或3rem，否则除法失败 - 单位混合没问题：
margin-left: calc(var(--gutter) + 1rem)现代浏览器支持，但 IE11 会丢弃整条声明
Sass 或 PostCSS 能补上哪些原生 CSS 做不到的事
原生 CSS 的 calc() 是运行时计算，Sass 和 PostCSS 是编译期处理——它们解决的是不同维度的问题。
- Sass：
math.div(100%, 3)编译成33.333333%，但无法响应--col-count变化；/运算必须加括号：(100% / 3)，否则被当成分隔符 - PostCSS：靠
postcss-custom-properties+postcss-calc插件链，先把var(--gap)替换，再执行静态计算；preserve: false必须设，否则留着calc()原样输出 - 三者不能混用：Sass 无法读取运行时
var(--x)，PostCSS 插件不处理min()/max()，原生calc()不支持if或函数调用
最易被忽略的点是：所有参与 calc() 的变量值，必须在声明时就带单位或为纯数字——--size: 16 和 --size: 16px 在同一份 CSS 里混用，会导致部分计算无声失败，且难以定位。
