CSS变量必须用calc()显式计算才能参与布局，如margin: calc(var(--margin) * 1)；变量值须带单位（如16px），纯数字无效；calc()支持运算、响应式调整与动态更新，且兼容现代浏览器。
如何用 --margin 变量配合 calc() 控制外边距
直接给结论：CSS变量本身不能直接当数值参与布局计算，必须用 calc() 显式“唤醒”它。否则写成 margin: var(--margin); 在多数浏览器里会失效（尤其当变量值不含单位时）。
常见错误现象：var(--margin) 被设为 16（无单位），但 margin: var(--margin); 不生效；或设为 "16px" 字符串，导致解析失败。
- 变量值必须带单位（如
16px、1em），不能是纯数字 -
calc()是安全兜底方式，即使变量有单位也能参与加减乘除运算 - 推荐统一用
calc(var(--margin) * 1)或calc(var(--margin) + 0px)强制类型转换
为什么 calc(var(--margin) * 2) 比 var(--margin) 更可靠
因为 CSS 变量本质是字符串替换，calc() 是唯一能对变量值做算术运算的函数。不套 calc()，变量就只是静态值，无法响应动态变化或组合计算。
使用场景：响应式间距、主题切换（如深色模式下外边距微调）、组件库中通过属性控制紧凑/宽松模式。
立即学习“前端免费学习笔记（深入）”；
-
margin: calc(var(--margin) * 1.5);→ 支持小数倍缩放 -
margin-top: calc(var(--margin) + 4px);→ 叠加固定偏移 -
margin: calc(var(--margin) - 2px);→ 安全减法（只要结果 ≥ 0）
var(--margin) 的单位必须显式声明，不能靠父元素推导
CSS 不会自动给无单位变量补单位。哪怕父元素 font-size: 16px，var(--margin) 设为 1 也不会变成 1px —— 它就是非法值，被忽略。
错误示例：:root { --margin: 12; } → 后续 margin: calc(var(--margin) * 2); 解析为 calc(12 * 2)，缺单位，无效。
- 正确写法：
--margin: 12px;、--margin: 0.75rem;、--margin: 2vh; - 避免混合单位：
calc(var(--margin) + 1em)中若--margin是px，可能引发不可预期缩放 - 调试技巧：在 DevTools 中鼠标悬停
var(--margin)，看是否显示带单位的实际值
结合自定义属性与 JavaScript 动态更新时的注意事项
JS 修改 style.setProperty('--margin', '24px') 是安全的，但若改成 '24'（漏单位），后续所有 calc() 都会中断计算并回退到默认值（如 0）。
性能影响极小——CSS变量变更只触发重排（reflow）当且仅当它影响几何属性（如 margin），且现代浏览器对此做了优化。
- 批量更新多个间距变量时，建议用
element.style.cssText一次性设置，减少重排次数 - 不要在循环中高频调用
setProperty改变--margin，易触发布局抖动 - 兼容性：Chrome 49+、Firefox 31+、Safari 9.1+、Edge 15+，IE 完全不支持，需降级方案
实际最常被忽略的一点：CSS 变量作用域是继承的，但 calc() 中的变量查找只发生在声明该规则的元素及其祖先上，不会跨 Shadow DOM 边界——如果你在 Web Component 里用，得手动透传变量。
