calc()除法中除数必须是无单位纯数字，如--rows:4；若含单位（如4px）则整条声明被忽略。css解析时要求除数量纲确定，不支持运行时求值。
calc() 除法报错：var(--rows) 不能当除数
浏览器直接忽略整条 calc() 声明，DevTools 里显示 “invalid value” 或属性灰掉——根本不是兼容性问题，而是 CSS 规范强制禁止：除数（/ 右侧）必须是无单位数字字面量。
比如 height: calc(100vh / var(--rows))，只要 --rows 定义为 4px、4rem 或甚至 4%，就非法；只有 --rows: 4（纯数字，不含任何单位）才被接受。
-
--rows: 4✅ 除数是纯数字，calc(100vh / var(--rows))解析为calc(100vh / 4) -
--rows: 4px❌ 除数带单位，语法错误，整条声明丢弃 -
--rows: 4.0✅ 小数也合法，只要没单位 -
--rows: 0⚠️ 危险！0 是数字，但若它来自预处理器未插值变量（如 Sass 的$rows: 0），编译后可能变成裸0，而浏览器对除零不检测，结果不可控
为什么不能写 calc(100px / var(--factor))？
因为 var(--factor) 在 CSS 解析阶段尚未展开，它只是个“待替换的占位符”，不是可静态推导的数值。CSS 不允许运行时求值，所有类型判断必须在解析时完成。
换句话说：calc() 不是 JS 函数，它不执行变量读取、不处理异常、不归一化单位——它只做确定性代数简化。
- 合法表达式必须能被解析器一眼判定“除数有且仅有一个量纲：无单位”
-
100vh / 2✅ 字面量2明确无单位 -
100vh / var(--n)✅ 前提是--n值本身是2，不是2px -
100vh / (var(--n))❌ 括号不改变语义，仍非法（如果--n带单位）
Sass/Less 中除数变量怎么安全传入 calc()？
预处理器变量（如 $n 或 @n）若参与除法，必须确保编译后右侧是纯数字字符串，且不能被预处理器误算。
- Sass 错误写法：
height: calc(100vh / $n)→ 若$n: 4px，编译成calc(100vh / 4px)，直接报错 - Sass 正确写法：
height: calc(100vh / #{$n})，且$n: 4（注意：没单位） - Less 错误写法：
height: calc(100vh / @n) - Less 正确写法：
height: calc(100vh / @{n})，且@n: 4 - 更稳妥方案：用
clamp()替代除法逻辑，例如width: clamp(200px, 100% / 2, 800px)→ 把除数2提前固化
替代方案：用 clamp() 或容器查询绕过除法限制
当除数需要动态（比如根据屏幕列数算单列宽），又不敢碰 calc() 除法时，clamp() 和 container queries 是更健壮的选择。
-
width: clamp(250px, 100% / 3, 400px)❌ 仍非法，/ 3是硬编码，但/ var(--cols)不行 -
width: clamp(250px, 100% * 0.333, 400px)✅ 把除法转为乘法，--scale: 0.333是合法无单位变量 -
@container (min-width: 600px) { .item { width: 50%; } }✅ 容器查询天然规避 calc 除法，适合网格响应逻辑 - 真要动态列数？用 JS 注入固定值：
el.style.setProperty('--cols', cols)，再配合calc(100% / var(--cols))—— 但前提是确认--cols值始终为纯数字
真正容易被忽略的是：你改了 JS 注入的 --cols，却没检查它是否被意外转成字符串 "3" 或带单位的 "3px" —— 这种隐式类型转换，比 CSS 语法错误更难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
