css变量本质是字符串，无类型；@property通过syntax和inherits声明类型，才支持动画/过渡。var(--x)不能直接用于transition或calc数值运算，因解析为字符串导致语法错误或无法插值。
CSS 变量本身不声明数据类型，所有值都按字符串存储和传递；真正支持类型化的是 @property，它才是解决动画/过渡中类型歧义的唯一机制。
为什么 var(--x) 不能直接用于 transition 或 calc 中的数值运算
CSS 变量（即自定义属性）本质是字符串容器。即使你写 --size: 16，浏览器也只存为字符串 "16"，不会自动识别为数字。所以：
-
width: var(--size)px❌ 语法错误——var(--size)展开后变成16px，但中间缺空格，实际是16px被当做一个 token，而 CSS 不允许这样拼接 -
margin: calc(var(--size) * 2px)✅ 但前提是--size的值带单位，比如--size: 16px；若写成--size: 16，就得用calc(var(--size) * 1px) -
transition: width 0.3s对width: calc(var(--size) * 1px)无效——因为calc()不是可动画属性，浏览器无法插值
@property 才是带类型的“真变量”
只有 @property 声明能告诉浏览器：“这个变量是数字”“这个变量是颜色”，从而启用插值、过渡和 @keyframes 动画。关键点：
- 必须包含
syntax和inherits两个参数，漏掉任一就退化为普通 CSS 变量 -
syntax: "<number>"</number>表示只接受纯数字（不含单位、不含%），例如0.7、100，但不能是"70%"或"16px" -
inherits: false是动画场景下的事实标准，避免父级继承干扰插值起点 - 声明位置只能在
:root或具体选择器中，不能放在@media或嵌套规则里
正确示例：
@property --opacity { syntax: "<number>"; inherits: false; initial-value: 1; }</number>
JS 修改时的类型陷阱
用 element.style.setProperty() 改 @property 变量时，传参类型必须严格匹配 syntax 声明：
- 数字型：
el.style.setProperty('--opacity', 0.85)—— 传number，不是"0.85" - 颜色型：
el.style.setProperty('--bg', '#ff6b6b')—— 字符串合法，因<color></color>接受十六进制字面量 - 长度型：
el.style.setProperty('--gap', '12px')—— 必须带单位，<length></length>不接受纯数字12 - 错误示范：
el.style.setProperty('--opacity', '85%')——%不属于<number></number>，动画立即中断
兼容性与 fallback 不是可选项
@property 目前仅 Chromium（Chrome 110+、Edge 110+、Opera 96+）和 Safari 16.4+ 支持，Firefox 仍无实现计划。生产环境必须：
- 用
@supports (@property: --x) { ... }包裹现代逻辑 - 降级方案不是“放弃动画”，而是回退到 class 切换（如
.is-loading）或 JS 驱动的requestAnimationFrame - 避免在
syntax中使用实验性值，如<image></image>或自定义函数，它们尚未形成稳定规范
最常被忽略的一点：很多人以为只要写了 @property 就能自动获得类型能力，其实没配 syntax 和 inherits，它就跟普通 --x 没区别——连 transition 都不会触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
