CSS变量值均为字符串，类型由浏览器按属性上下文解析；唯一可控类型机制是@property，需声明syntax和inherits，且兼容性有限。
CSS变量本身不声明数据类型，所有值都是字符串，但浏览器会按上下文自动解析为对应类型；真正能约束类型的只有 @property，且仅限支持它的浏览器。
var() 能用哪些值？别信“支持6种类型”的说法
CSS变量的值在声明时写什么就是什么字符串，var() 只负责替换，不做类型转换。所谓“数字”“颜色”“布尔”等，全是浏览器在属性值解析阶段根据目标属性（如 color、margin）反向推断出来的。
-
--size: 16是合法的，但用在font-size: var(--size)会失效——因为16不是合法长度值，必须写成--size: 16px或配合calc(var(--size) * 1px) -
--bg: #007bff和--bg: "blue"都能被background-color: var(--bg)正确识别，但后者本质是字符串拼接，不可参与calc() -
--flag: true在display: var(--flag)中无效，display不接受true字符串，也不做布尔转换
@property 才是唯一可控类型机制
只有 @property 能让变量具备可预测的类型行为，尤其对 transition 和 @keyframes 至关重要。没它，var(--opacity) 动画大概率静默失败。
- 必须同时声明
syntax和inherits，漏一个就退化为普通变量：@property --alpha { syntax: "<number>"; inherits: false; }</number> -
syntax: "<number>"接受0.5、100，但拒绝"0.5"（字符串）或50%（%不属于<number>） - JS 修改时必须传原始类型：
el.style.setProperty('--alpha', 0.7)✅，el.style.setProperty('--alpha', '0.7')❌（部分 Chromium 版本直接忽略） - 兼容性差：Chrome/Edge 110+、Safari 16.4+ 支持，Firefox 仍无排期，
@supports (@property: --x) { }包裹必不可少
命名和调用里最常踩的三个坑
命名看着自由，实际全是硬约束；调用看似简单，一漏默认值就线上出事。
立即学习“前端免费学习笔记（深入）”；
- 变量名以
--开头是铁律，--class、--default等 JS 保留字会直接触发SyntaxError，不是警告 - 语义化命名不是风格问题，而是维护成本问题：
--color-primary比--blue-500多活三年，改主题时不用全局搜替换 -
var(--x, #000)的默认值不能是另一个var()，也不能是空值；calc(var(--gap, 8px) * 2)这种复合场景，漏掉默认值会让整个表达式变成calc(unset * 2)→invalid value
真正难的不是写对第一个 var()，而是确保整条链路——声明、继承、覆盖、JS 注入、动画触发、降级兜底——每个环节都按类型预期工作。很多“动画不动”“颜色变透明”的问题，根源都在 @property 缺失或默认值遗漏。
