calc()中使用css变量必须用var(--name)显式调用，乘除需至少一操作数无单位，加减单位须一致，否则整条规则静默失效；空格、单位、函数调用缺一不可。
直接用 var(--name) 套进 calc() 就能实现流式排版，但必须满足三个硬条件：变量显式调用、乘除至少一操作数无单位、加减单位一致；否则整条样式静默失效。
为什么 calc(--gap * 2) 总是不生效？
因为 calc() 不识别裸变量名，只认 var(--gap) 这种函数调用形式。写成 --gap * 2 就像让浏览器解析未声明的 JS 变量，结果是整条 CSS 规则被跳过。
-
calc(var(--gap) * 2)✅ 正确，前提是--gap是带单位的值（如20px） -
calc(--gap * 2)❌ 失效，浏览器忽略该声明 -
calc(var(--gap) * var(--scale))⚠️ 风险高，--scale必须是纯数字（如1.5），否则20px * 1.2px单位冲突
calc() 里加减运算的单位一致性陷阱
现代浏览器能算 calc(1rem + 20px)，但 IE11 和部分安卓 WebView 会整条规则失效——且 @supports 无法精准检测。真要兼容，就得在构建阶段把能确定的部分算死。
- 加减两侧单位必须可比：
calc(100% - 20px)合法，calc(1rem + 1vw)❌ 不合法（基准不同） - 空格是硬性要求：
calc(100% - 20px)✅，calc(100%-20px)❌（被当作文本字面量丢弃） - 如果用 Sass 预编译，拼接时要显式加空格：
calc(#{$full} - #{$gap})→ 输出calc(100% - 20px)
动态网格中用 var() 控制 minmax() 的实际写法
现代浏览器已支持在 minmax() 第一个参数里用 var()，但必须确保变量值是有效长度；否则静默失败，DevTools 只显示 Invalid property value。
- 正确写法：
grid-template-columns: repeat(auto-fit, minmax(var(--grid-min), 1fr))，其中--grid-min: 260px - 错误写法：
minmax(--grid-min, 1fr)（漏掉var()）或--grid-min: 260（缺单位） - 若需动态列数上限，拆成原子变量：
--unit: 260px、--gap: 20px、--cols: 4，再组合为calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols))
最容易被忽略的是：当 calc() 里混用单位做加减时，看似跑通了，其实只是当前浏览器宽容——一旦换到旧环境或 WebView，整个布局就塌了。别等上线才发现，本地开 IE11 或低版本安卓模拟器跑一遍最实在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
