CSS自定义属性不能直接存储带单位的数值，需分离数值与单位变量（如--size-value: 16; --size-unit: 1px），再在calc()中组合使用；单位混用需谨慎，动态单位切换应交由JS或构建工具处理。
CSS自定义属性不能直接存储带单位的数值
你无法在 --size: 16px 这样的变量里直接做 calc(var(--size) * 2) —— CSS会报错 Invalid property value。因为 calc() 要求参与运算的每个值都必须是“可计算的数值类型”，而带单位的值（如 16px）只能作为整体参与加减，不能用于乘除。
正确做法：单位和数值分离存储
把数字和单位拆开，用两个变量分别存，再在 calc() 中组合：
:root {
--size-value: 16;
--size-unit: 1px;
}
<p>.element {
font-size: calc(var(--size-value) <em> var(--size-unit)); /</em> → 16px <em>/
width: calc(var(--size-value) </em> 2 <em> var(--size-unit)); /</em> → 32px */
}</p>
-
--size-unit必须是带单位的数值（如1px、1rem），不能是字符串"px" - 乘法中，
var(--size-value)是纯数字，var(--size-unit)是带单位的量纲，CSS允许数字 × 带单位值 - 不支持
var(--size-value) * var(--size-unit) * 2这种写法（运算符优先级导致解析失败），要写成calc(var(--size-value) * 2 * var(--size-unit))
单位混用时需格外小心
如果想让一个变量既能表示 px 又能表示 rem，不要试图动态拼接单位字符串。CSS不支持运行时单位切换。常见错误写法：--unit: "px" 或 calc(var(--val) + var(--unit)) —— 这会直接失效。
- 不同单位需定义独立变量对，例如：
--base-px: 16+--base-px-unit: 1px，--base-rem: 1+--base-rem-unit: 1rem - 混用单位参与同一
calc()表达式（如16px + 1rem）是合法的，但结果依赖根字体大小，容易产生意外缩放 - 使用
em或ex等相对单位时，变量的实际效果会随父元素变化，调试时建议用浏览器开发者工具实时查看计算后的像素值
PostCSS 或构建工具才是真解耦方案
纯 CSS 的变量单位分离法够用，但一旦涉及条件单位、响应式单位切换或跨组件复用，就很快变得难维护。这时该考虑预处理器或构建时方案：
- Sass 中可用
$size: 16px直接参与$size * 2，因为编译期就完成计算 - PostCSS 插件如
postcss-css-variables不支持运行时单位运算，别指望它补足这个缺陷 - Vite / Webpack 项目中，更稳妥的是用 JS 注入 CSS 变量（例如
document.documentElement.style.setProperty('--size-px', `${baseSize}px`)），把单位绑定逻辑交给 JS 控制
真正棘手的不是“怎么写”，而是“在哪一层做单位决策”——CSS变量适合固定单位场景，动态单位逻辑请交给JS或构建流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
