calc()中css变量乘除失效的根本原因是：参与*或/的两个操作数必须有一个是纯数字（无单位），否则整条声明被浏览器静默丢弃。
calc()里用CSS变量做乘除，为什么浏览器直接忽略整条声明
根本原因是calc()对乘除运算有硬性类型约束：参与*或/的两个操作数中，**必须有一个是纯数字（无单位）**。如果var(--size)和var(--multiplier)都带单位（比如--size: 16px、--multiplier: 2px），浏览器会判定16px * 2px非法，整条CSS规则静默丢弃——DevTools里都看不到它。
-
calc(var(--size) * var(--multiplier))✅ 仅当--multiplier定义为2（无单位）才合法 -
calc(var(--size) * 2)✅2是纯数字，--size可以是16px或1rem -
calc(var(--size) * var(--gap))❌ 若--gap: 20px，则变成16px * 20px，单位平方不被CSS支持 - 乘除不能“单位相消”，
calc(100% / 2)合法，但calc(100% / 2rem)❌（分母带单位）
变量定义时就埋了雷：单位缺失或错配
失效往往不是写法错，而是--size或--scale本身定义就不满足乘除前提。比如把缩放系数写成--scale: 1.5px，看着像倍率，实则是带单位的长度值，一进calc()就炸。
- 纯数字变量必须彻底无单位：
--scale: 1.5✅，--scale: 1.5px❌ - 带单位变量只负责提供基准量纲：
--width: 320px✅，--width: 320❌（后面加减会失效） - 别混用：
--size: 16px+--scale: 1.5→calc(var(--size) * var(--scale))✅ - 用
@supports检测不出这类问题——它只管语法是否被识别，不管运行时单位是否冲突
Sass/Less里变量插值后，单位可能被悄悄吃掉
预处理器在编译阶段就处理$size和$scale，如果插值没写对，或者变量本身没单位，输出的calc()字符串从源头就非法。
- Sass必须写
calc(100% - #{$gap})，且$gap: 20px（带单位）✅ - 写成
calc(100% - $gap)❌，Sass可能算出calc(80%)这种非法值 - Less老版本必须转义：
calc(~"100% - @{gap}")，否则@gap被当作算术参与运算 - 函数返回值要检查：
$total: map-get($spacings, lg)若返回48（无单位），得手动补#{$total}px
嵌套calc()或中间计算漏掉空格，失效链就断了
你以为calc(var(--a) * calc(2 + 1))能跑？Safari 15.4之前根本不认嵌套calc()，安卓WebView也常整条丢弃。更常见的是拼接时空格丢失——尤其用Sass字符串拼接，calc(#{$full} - #{$gap})若$full是"100%"而$gap是"20px"，输出calc(100%-20px)，缺空格即失效。
- 所有
+和-两侧必须有空格：calc(100% - 20px)✅，calc(100%-20px)❌ -
0必须带单位：calc(0px + var(--offset))✅，calc(0 + var(--offset))❌ - 父容器高度为
auto时，100%基准为0，calc(100% - 60px)结果恒为负，浏览器直接忽略 - 真正容易被忽略的是三重叠加：变量定义错 + 插值漏空格 + 父容器没高度——任何一个环节断掉，
calc()就静默消失
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
