calc()是唯一支持单位运算的css函数，变量必须在calc()内使用且单位需一致，纯数字变量需显式补单位，加减运算要求单位兼容，混合单位须经实机测试验证。
不能直接在 CSS 自定义属性里“存单位”，--size: 16px 看似可行，但本质是存字符串，后续无法参与数值运算；真正能安全带单位参与计算的，只有 calc() 函数内部。
为什么 --size: 16px 不等于“带单位的数值”
CSS 变量（自定义属性）只存储字符串，浏览器不解析其单位语义。即使你写 --gap: 2rem，JS 读取 getComputedStyle(el).getPropertyValue('--gap') 拿到的是 "2rem" 字符串，不是可计算的长度值。更关键的是：变量外直接拼单位会失效，比如：
--gap: 2rem; margin: var(--gap) * 2; /* ❌ 语法错误，CSS 不支持变量外运算 */
这种写法被忽略，浏览器回退到默认 margin 值。
calc() 是唯一安全混用单位和变量的方案
所有单位运算必须收束到 calc() 内部，且变量必须在 calc() 中引用。核心规则：
- 变量本身应存纯数字（如
--base: 16），单位显式写在calc()里：--gap: calc(var(--base) * 1px) - 加减运算中，单位必须一致或含无单位数字：
calc(var(--gap) + 1rem)✅，但calc(var(--gap) + 5%)❌（多数浏览器拒解析） - 避免依赖隐式转换：不要指望
calc(2 + 1rem)中的2总是按px解释——font-size下可能按em解，行为不统一
SCSS 编译期生成带单位值的注意事项
如果你用 SCSS 预处理，#{$val}px 插值只是文本替换，$val 必须是 number 类型才能参与运算：
- 错误：
$size: "16"; width: #{$size}px * 2→ 报错或输出字面量"16px * 2" - 正确：
$size: 16; width: $size * 2px→ 输出width: 32px - 不确定单位时，先判断再补：
$safe: if(unitless($input), $input + px, $input) - 生成 CSS 变量时，仍需走
calc()：比如--size: #{$size}px可以，但后续 JS 读取仍是字符串，无法直接算
Tailwind 方括号语法不等于 CSS 变量，别混用
Tailwind 的 mt-[24px] 是 JIT 编译时生成静态 CSS 规则，和运行时 CSS 变量无关。常见误区：
-
mt-[var(--gap)]❌ 不生效 —— Tailwind 不解析var()，它只认字面量值 -
mt-[calc(var(--gap)+1rem)]❌ 同样无效 —— 方括号内不支持函数调用 - 真要动态控制，得用
style="--gap: 24px"+margin-top: calc(var(--gap) + 1rem)组合
单位必须显式写出，mt-[24] 仅对少数属性（如 z-index）有效，对 margin 类无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
