CSS变量--size若定义为纯数字（如--size: 16）则calc中无法直接参与运算，因值为字符串；应定义为带单位（如--size: 16px）或在calc中用1px显式转换（如calc(var(--size) * 1px)）。
calc里直接用--size会失效，因为CSS变量默认是字符串
当你写 --size: 16，它实际存的是字符串 "16"，不是数字。而 calc(1px * var(--size)) 会报错：浏览器不支持字符串参与乘法运算。这不是语法错误，是类型不匹配——类似 JS 里 "16" * 1px 会得 NaN。
常见现象：width: calc(var(--size) * 1px) 完全不生效，开发者工具里该属性显示为无效（invalid property value）。
解决思路只有一个：让变量值自带单位，或在使用时补单位但确保它是纯数字上下文。
推荐做法：定义变量时就带单位，比如--size: 16px
这是最稳妥、兼容性最好（Chrome 49+、Firefox 31+、Safari 9.1+ 都支持）的方式：
:root {
--size: 16px;
}
.box {
font-size: var(--size);
width: calc(var(--size) * 2); /* ✅ 16px * 2 = 32px */
}
注意点：
- 变量值必须是合法的 CSS 尺寸（如
16px、1.5em、0.25rem），不能写成"16px"（引号会让它变成字符串） - 如果变量要复用在非尺寸场景（比如作为
z-index），就得另起一个无单位变量，比如--z: 10 -
calc()内部可直接参与加减乘除，单位自动推导，不需要额外包裹1 *
想保持变量无单位？必须用calc配合1px显式转换
如果真需要 --size: 16 这种纯数字变量（例如统一控制缩放系数），只能靠 calc 强制转换单位：
:root {
--size: 16;
}
.box {
font-size: calc(var(--size) * 1px); /* ✅ 把 16 × 1px → 16px */
margin: calc(var(--size) * 0.5px); /* ✅ 8px */
}
关键限制：
- 乘数必须是带单位的合法数值（
1px、1em都行，但不能是1或"1px"） - 不能用于不接受长度的属性，比如
z-index: calc(var(--size) * 1)是合法的（结果是数字），但z-index: calc(var(--size) * 1px)会报错 - Safari 15.4 之前对
calc(var(--n) * 1px)支持不稳定，若需兼容老 Safari，优先选带单位定义
别踩attr()或string()的坑——它们不适用
有人试过 attr(data-size px) 或幻想 CSS 有 number() 函数，目前都不行：
-
attr()只在 content 属性中有效，且返回字符串，不能进calc - CSS 没有类型转换函数，
string()、number()等全是提案阶段，尚未被任何浏览器实现 - JS 注入 style 是可行替代方案，但那就脱离了纯 CSS 范畴，也失去级联和响应式优势
真正需要动态数值计算又依赖 JS 的场景，不如直接用 CSS Custom Properties + style.setProperty 控制，而不是硬套 calc。
最易被忽略的一点：变量作用域和继承不影响 calc 行为，但会影响你调试时看到的最终值——务必在开发者工具的“Computed”面板里看真实解析结果，别只信“Styles”里的原始声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
