CSS变量存%参与calc()会失效，因var()返回原始字符串导致参照系混乱；应改用无单位数值（如--ratio: 0.25），再在calc()中显式绑定单位（如calc(100% * var(--ratio))），以规避单位冲突与上下文漂移。
不能直接让CSS变量存%再参与calc()混算，浏览器会因单位冲突或上下文漂移静默丢弃整条规则。
为什么var(--gap)含%在calc()里会失效
因为var(--gap)返回的是原始字符串。如果--gap: 50%，那calc(100% - var(--gap))实际展开为calc(100% - 50%)——表面单位一致，但两个%的参照系可能不同：前者是当前元素父容器宽度，后者是变量定义处（比如:root）的包含块，浏览器不校准也不报错，直接跳过该声明。
-
--gap: 20px+calc(100vh - var(--gap))❌vh与px不可加减 -
--gap: 10%+calc(100px - var(--gap))❌px与%跨单位运算被拒 -
--gap: 0.1+calc(100% * var(--gap))✅ 无单位数值乘%合法且上下文统一
用无单位数值替代%变量更可控
把比例逻辑从“带单位字符串”转为“纯数字”，把单位绑定动作交给calc()内部，能规避参照系混乱和兼容性陷阱。
- 定义
--ratio: 0.25，而非--ratio: 25% - 使用时写
width: calc(100% * var(--ratio))，不是calc(100% - var(--ratio)) - 需要偏移量时，用
left: calc(var(--offset-ratio) * 100%); --offset-ratio: 0.15 - 避免
--gap: 10%→margin-left: calc(var(--gap) * 2)这种写法，乘法右侧必须是无单位数，但左侧%本身已带单位，语义冗余且易出错
calc()中混用单位的边界在哪
加减运算只接受同类型单位，乘除则宽松得多——但前提是操作数类型明确。百分比在calc()里本质是“相对系数”，不是长度，所以它只能和%、无单位数或某些支持相对计算的属性（如transform: scale()）配合。
-
calc(50% + 20px)❌ 多数浏览器拒绝，%与px无公共基准 -
calc(100% * 0.8)✅ 合法，%× 无单位数 = 新% -
calc(var(--scale) * 1rem)✅ 前提是--scale为1.2这类纯数字 -
calc(100vw - 20px)✅vw和px同属长度类，现代浏览器普遍支持
真正难处理的不是“怎么写”，而是“怎么确保所有用到%变量的地方，其父容器都稳定且可预测”。一旦嵌套变深或组件复用，%的参照系就容易失控。用无单位数值+显式单位绑定，等于把控制权收回到自己手里，而不是依赖浏览器在运行时猜意图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
