浏览器忽略没加--的“CSS变量”声明，因为--是CSS规范强制的语法开关，只有以--开头的属性名才会被识别为自定义属性并注册到变量作用域；否则会被当作无效属性名静默丢弃。
为什么浏览器会忽略没加 -- 的“CSS变量”声明
因为浏览器根本没把它当变量——它只是个无效属性名。CSS引擎在解析样式时，先查原生属性白名单（如 color、margin），不匹配的就报错或丢弃；只有以 -- 开头的键，才会被识别为“自定义属性”，进入变量作用域。
-
:root { primary-color: #333; }→ 静默失败，不注册变量，var(--primary-color)读不到值 -
:root { --primary-color: #333; }→ 正确注册，可在任意作用域用var(--primary-color)引用 - 哪怕写成
color: var(primary-color)（漏掉--），也会直接报Invalid property name
-- 是语法开关，不是命名习惯
-- 不是“推荐前缀”，而是 CSS 规范强制的解析分隔符。Sass 用了 $，Less 用了 @，浏览器必须选一个不会和现有语法冲突的标识——双横线既不在原生属性中出现，又容易被词法分析器快速识别为“跳过标准校验，走变量逻辑”。
-
--1、--你好、--_test都合法，但-primary或primary就不是变量 -
--必须紧贴变量名开头，中间不能有空格：-- theme❌，--theme✅ - 预处理器（如 Sass）里定义的
$color和 CSS 变量--color完全无关，编译后也不会自动加--
大小写敏感 + 作用域独立，-- 不能省略的连锁影响
漏掉 -- 不仅让变量不可用，还会掩盖更隐蔽的问题：比如大小写拼错、作用域误判，而这些错误往往只在特定组件里才暴露。
-
--TextColor和--textcolor是两个变量，引用时var(--TextColor)写成var(--textcolor)就返回unset -
--不决定作用域：在.btn里声明--bg，只对按钮生效；但不管在哪声明，--都不可少 - JS 动态设置时也得带
--：el.style.setProperty('--bg', 'red')，写成'bg'就无效
常见误用场景：模板插值、BEM、PostCSS 容易悄悄吃掉 --
构建流程中，字符串拼接或插值一不小心就会让 -- 消失，而且控制台通常不报错，只表现为样式不生效。
立即学习“前端免费学习笔记（深入）”；
- ES6 模板字面量：
`--${modifier}`没问题，但`${prefix}-${modifier}`若prefix是空字符串，就变成-active，开头只剩一个- - BEM 中
&--disabled（Sass）生成的是类名.comp--disabled，这不是 CSS 变量，双横线在类名里只是普通字符 - PostCSS 插件若配置不当，可能把
--当作注释或非法符号过滤掉，尤其在处理动态主题变量时
真正卡住人的从来不是语法本身，而是 -- 这两个字符太轻，轻到你改完变量名、刷新页面、发现没效果时，第一反应永远是检查路径、拼写、作用域——却忘了低头看那两个横线还在不在。
