css变量在calc()中不会失效，但必须带单位；纯数字如--size: 16会导致calc(var(--size)*2)非法，正确写法是--size: 16px；单位需一致，不可混用，推荐用rem/em统一基准。
calc() 里直接用 CSS 变量会失效？
不会失效，但必须确保变量值带单位。CSS 变量本身是字符串，calc() 不会自动补单位，--size: 16 这种纯数字在 calc(var(--size) * 2) 中会被当成无单位数值，导致整个表达式非法（浏览器报 Invalid property value）。
- ✅ 正确写法：
--size: 16px，再用width: calc(var(--size) * 2) - ❌ 错误写法：
--size: 16，即使你心里知道它是像素，calc()不认 - ⚠️ 注意：不能混单位运算，
var(--size) + 1rem要求--size本身也得是rem或可转换的相对单位（如em），否则计算中断
响应式缩放时，用 calc() 套变量做流体尺寸
想让元素宽度随视口变化，又保留设计系统里的基础比例，别硬写媒体查询——用 calc() 拆解比例关系，变量控制基准值。
-
--base: 4px是设计稿中 1 单位对应的像素（比如 Figma 的 4px 网格），那么padding: calc(var(--base) * 3)就是 12px - 配合
vw做流体：--scale: 0.5vw，再写font-size: calc(16px + var(--scale))，实现字号随屏幕增大缓慢增长 - ⚠️ 关键限制：
calc()不支持嵌套函数，calc(var(--a) + clamp(12px, 2vw, 18px))是合法的，但calc(clamp(var(--min), var(--mid), var(--max)))会失败——clamp()内部不能直接用变量，得先用变量定义好各参数再传入
calc() 和 CSS 变量一起用，单位不一致怎么处理？
常见于想用一个变量同时控制 margin 和 font-size，但两者单位逻辑不同。不能靠 JS 动态改，得靠 CSS 自身机制对齐。
- 用
em或rem作为中间单位：定义--unit: 1rem，然后margin: calc(var(--unit) * 1.5)、font-size: calc(var(--unit) * 1.2)，所有计算基于同一参考 - 避免用
%参与加减：比如width: calc(var(--pct) + 10%)要求--pct必须是百分比（如--pct: 20%），写成--pct: 20就错 - 调试技巧：临时加一条
content: "debug: " attr(style);到伪元素里，或用 DevTools 的 Computed 面板看最终解析值，确认单位是否被正确识别
性能和兼容性要注意什么？
现代浏览器对 calc() + 变量的支持很稳（Chrome 49+、Firefox 31+、Safari 9.1+），但有两个隐藏成本容易被忽略。
- 重排开销：如果变量在 :root 中频繁变更（比如滚动监听改
--scroll-y），且被大量calc()引用，可能触发同步布局计算——尤其在top/left等影响定位的属性上 - 不能用于 @keyframes 动画关键帧中的属性插值：虽然
calc()值能声明，但动画引擎不把它当可插值类型，会导致跳变或失效；需要动画的场景，优先用transform: scale()或 CSS@property显式注册变量类型 - SSR 场景下，服务端无法执行
calc()，若依赖变量计算初始尺寸，需预留 fallback 值（如width: 200px; width: calc(var(--w, 200px))）
变量和 calc() 组合真正难的不是语法，而是单位语义的一致性管理——一旦某个变量被多处复用，又混了 px/rem/vw，后续改一个值就可能牵出三处错位。建议从项目初期就约定变量命名后缀，比如 --space-xs 必为 px，--text-base 必为 rem，不省那几个字符。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
