var(--color)“没生效”常因值非法被浏览器静默丢弃，如--bg:12（缺单位）、--size:auto 50%（类型混用）；@property可强制类型校验，但仅chromium支持；回退值仅在变量未定义或语法非法时触发，空值、inherit、transparent等合法值不触发。
为什么 var(--color) 有时看起来“没生效”
不是变量没定义，而是值本身被浏览器判定为非法 CSS 值，导致整个声明被丢弃。比如 --bg: 12; 缺单位、--size: auto 50%; 类型混用、--hue: "180"; 多余引号——这些写法在语法上“可解析”，但语义上不匹配目标属性（如 background-color 或 width）所需类型，浏览器直接跳过，不会报错，只在开发者工具里标为 invalid。
用 @property 强制类型校验：只接受合法颜色值
@property 是目前唯一能让 CSS 自定义属性具备运行时类型检查能力的机制。它不改变变量使用方式，但会在赋值阶段拦截非法值。
-
@property --primary-color { syntax: "<color>"; inherits: false; initial-value: #007bff; }</color>—— 指定必须是<color></color>类型，12px、"red"、undefined全部拒绝 - 后续任何
element.style.setProperty('--primary-color', '12px')都会静默失败，变量值保持上一次合法值 - 搭配
initial-value可兜底：即使 JS 动态设值失败，样式仍能回退到预设色 - 注意：目前仅 Chromium 内核（Chrome/Edge 120+、Opera）支持，Firefox 和 Safari 尚未实现
var(--color, #fff) 的回退值为什么常被误判
回退值只在变量“未定义”或“值本身非法”时触发，但它不关心语义是否合理。常见误解：
-
--color: transparent;→ 合法值 →var(--color, #fff)不触发回退 -
--color: inherit;→ 合法值 → 同样不触发 -
--color: ;（空值）或--color: none;（none不是<color></color>）→ 触发回退 -
--color: rgb(255, 0,→ 语法不完整 → 触发回退
调试建议：在开发者工具中悬停失效的 var()，看提示是 “variable is undefined” 还是 “invalid value” —— 前者补定义，后者查赋值内容。
没有 @property 时的防御性写法
兼容旧环境或需跨浏览器稳定运行时，靠约定 + 工具链兜底：
- 所有颜色变量统一用 HSL/HSLA 或十六进制，避免 RGB 字符串拼接（
--c: "255, 0, 0";是陷阱） - JS 动态赋值前做简单校验：
if (/^#([0-9A-F]{3}){1,2}$/i.test(val) || val.includes('hsl') || val.includes('rgb')) {...} - 关键样式层叠覆盖：比如
background-color: #fff; background-color: var(--surface-bg, #fff);，确保降级有底 - 构建时用 PostCSS 插件（如
postcss-custom-properties）做静态检查，提前发现非法赋值
真正难防的不是拼写错误，而是把一个本该是颜色的变量，悄悄复用为尺寸或时间——这种跨语义滥用，@property 能拦住，人工 review 很容易漏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
