inherits: true不能省略，否则@property规则被浏览器忽略；它决定变量是否沿DOM树继承，true时子元素自动响应父级变量变化，false时仅限定义元素生效。
为什么inherits: true不能省略
声明 @property 时，inherits 不是可选项——它必须显式写为 true 或 false，否则整条规则被浏览器忽略。即使你想要继承行为，也不能只写 syntax: '<color>'</color> 和 initial-value 就完事。
常见错误现象：变量在子元素中无法通过 var(--my-color) 读取，控制台无报错，但样式不生效。原因就是 inherits 缺失，导致规则未注册成功。
-
inherits: true表示该变量像普通 CSS 属性（如color）一样沿 DOM 树向下传递 -
inherits: false表示只在定义它的元素上有效，子元素需重新声明才能使用 - 继承的是“变量定义”，不是计算后的值；父元素改了
--theme-color，子元素自动响应
inherits: true 配合 initial-value 的实际效果
当 inherits: true 时，initial-value 并非“全局默认值”，而是“未继承到任何值时的兜底值”。它只在以下情况起作用：
- 该元素本身没从父级继承到该变量（比如父级根本没定义
--text-color） - 该元素也没在自身样式中显式设置
--text-color - 此时
var(--text-color)才会回退到initial-value
示例：如果 @property --text-color { syntax: '<color>'; inherits: true; initial-value: #333; }</color>，而某个 .card 元素既没继承也没重设，则 color: var(--text-color) 渲染为 #333；但只要其父级写了 --text-color: blue，它就立刻变成蓝色，无视 initial-value。
立即学习“前端免费学习笔记（深入）”；
继承性变量在动画和 transition 中的表现
继承性本身不影响动画能力，真正起作用的是 syntax。但 inherits: true 让你能在不同层级分别触发过渡 —— 比如父容器改 --bg-hue，所有子元素的背景色同时渐变。
- 必须同时满足：
syntax: '<color>'</color>+inherits: true+transition: --bg-hue 0.3s - 若子元素覆盖了该变量（如
.child { --bg-hue: 240; }），则只对子元素自身过渡生效，不影响父级或其他兄弟节点 - 注意：CSS 变量继承是“静态传递”，不是响应式绑定；JavaScript 动态修改父级变量值，子元素会立即响应（因为变量重计算是实时的）
容易被忽略的兼容性与调试点
@property 在 Safari 16.4+、Chrome 110+、Edge 110+ 支持，Firefox 仍不支持（截至 2026 年 9 月）。启用继承性后，最容易踩的坑不是语法，而是作用域混淆：
- 不能把
@property写在@media或选择器内部，必须顶层声明 - 变量名区分大小写：
--Color和--color是两个变量 - 调试时可用
getComputedStyle(el).getPropertyValue('--color')查看是否继承成功；返回空字符串说明未继承也未定义 - 如果子元素显示为
initial-value却以为它该继承，先检查父元素是否真的设置了该变量（而非仅定义了@property）
