CSS自定义属性必须包含单位才能被尺寸类属性识别，如--size: 16px；纯数字需用calc()转换，如calc(var(--base) * 1rem)；JS设置时须手动拼接单位字符串。
var() 里不能直接写带单位的值
CSS 自定义属性（--my-var）本身只存储字符串，不解析单位。如果你写 --size: 16px，那它存的就是字符串 "16px"；但当你在 var(--size) 中使用时，CSS 引擎不会自动把它当作长度值参与计算——除非目标属性**明确接受该单位类型**，且上下文允许。
常见错误是以为 width: var(--size); 配合 --size: 16 再加个 px 后缀就能工作，结果发现无效或报错。根本原因是：单位必须和数值一起作为字符串完整传入，且不能在 var() 外硬拼接（比如 var(--size) + 'px' 是非法语法）。
正确写法：单位必须和数值绑定在变量值中
自定义属性的值要包含单位，否则无法被尺寸类属性（如 width、margin、font-size）识别为有效长度。
-
--gap: 12px✅ 可用于gap: var(--gap) -
--radius: 0.25rem✅ 可用于border-radius: var(--radius) -
--line-height: 1.5✅ 可用于line-height: var(--line-height)（无单位数字合法） -
--size: 16❌ 单独用font-size: var(--size) px是语法错误
需要动态组合单位？用 calc() 包一层
如果变量只存纯数字（比如为了方便 JS 操作或数学运算），又想在 CSS 中加单位，必须用 calc() 显式转换。
例如：
:root {
--base: 4;
}
.box {
width: calc(var(--base) * 1rem); /* → 4rem */
padding: calc(var(--base) * 2px); /* → 8px */
font-size: calc(var(--base) * 4px); /* → 16px */
}
注意：calc() 内部支持混合单位运算，但必须至少有一个操作数带单位，否则会报 Invalid property value。
-
calc(var(--base) * 1px)✅ -
calc(var(--base) + 1px)✅ -
calc(var(--base) + 1)❌（两个无单位数相加，在长度上下文中不合法）
JS 动态设置带单位的 CSS 变量要小心引号
用 JavaScript 设置时，别漏掉单位字符串：
document.documentElement.style.setProperty('--height', '24px'); // ✅
document.documentElement.style.setProperty('--height', 24 + 'px'); // ✅
document.documentElement.style.setProperty('--height', 24); // ❌ 会存成 '24'，无单位
尤其在 React/Vue 等框架中通过内联样式或 class 绑定设置时，容易忽略拼接逻辑。另外，Sass/Less 编译后若变量未转成字符串，也可能导致单位丢失。
单位不是装饰，是 CSS 类型系统的一部分；漏了单位，var() 就只是个字符串，不是可计算的尺寸值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
