@property 必须显式声明 initial-value，否则变量注册无效；它仅在注册时生效，需严格匹配 syntax 类型，且全局使用需配合 :root 赋值确保有效读取。
@property 必须显式声明 initial-value，否则变量注册无效
为什么 @property 的 initial-value 不可省略
和普通 CSS 自定义属性不同，@property 是“注册型”声明，不是赋值语句。浏览器不会从后续的 --var: value 中自动推断初始值——它只认 initial-value 字段。
常见错误是只写 syntax 和 inherits，结果动画完全不触发，控制台也无报错，排查起来非常隐蔽。
-
@property --hue { syntax: "<integer>"; inherits: false; }</integer>→ 注册失败，--hue仍被视为字符串类型 -
@property --hue { syntax: "<integer>"; inherits: false; initial-value: 220; }</integer>→ 正确，--hue被识别为整数，可用于transition或@keyframes
initial-value 必须严格匹配 syntax 类型
类型校验发生在注册阶段，不匹配会导致整个 @property 规则被忽略（浏览器静默丢弃，DevTools 的“样式”面板里都看不到该变量）。
例如：
-
syntax: "<angle>"</angle>→initial-value: 45deg✅；initial-value: "45deg"❌（带引号是字符串） -
syntax: "<color>"</color>→initial-value: #ff6b6b✅；initial-value: "red"❌（命名色需不带引号） -
syntax: "<number>"</number>→initial-value: 0.8✅；initial-value: "0.8"❌
注意：CSS 数字类型不支持单位后缀（如 px、%），<length></length> 才支持。
全局变量初始化要和 :root 赋值保持一致
即使你用 @property 注册了 --bg-hue，如果在 :root 里没给它赋初值，元素实际读取时仍可能 fallback 到未定义状态，导致 var(--bg-hue, 200) 触发默认值。
推荐写法是注册 + 同步赋值：
@property --bg-hue {
syntax: "<integer>";
inherits: false;
initial-value: 220;
}
:root {
--bg-hue: 220;
}</integer>
这样既满足类型注册要求，又确保所有子元素能立即读取到有效值，避免动画第一帧跳变。
动态更新时，initial-value 不起作用
initial-value 只在注册时生效，后续通过 JS 修改 style.setProperty('--var', ...) 或 CSS 覆盖，完全不受它约束。
所以别指望靠它做“重置逻辑”。真需要重置，得手动设回原值，或用 CSS revert / unset 配合继承链控制。
最容易被忽略的一点：当你在组件级局部注册 @property（比如在某个 .card 内部），initial-value 的作用域仅限于该选择器及其后代——但它不会自动覆盖父级已存在的同名变量值。必须配合 inherits: true 或显式重新赋值才能生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
