为什么CSS变量名必须以双横线开头_了解CSS自定义属性的语法起源

顺亿

2026-11-13 • 👁 0人浏览过

CSS变量名必须以--开头，因为这是CSS规范强制规定的语法分隔符，用于区分原生属性与自定义属性；--被浏览器解析器识别为“待求值的自定义属性”开关，不加--则声明无效且被忽略。为什么CSS变量名必须用

--

开头因为

--

是CSS官方为自定义属性预留的唯一无冲突标识符。Sass早占了

$

，Less早占了

@

，浏览器解析器在遇到

--

前缀时，会明确跳过原生CSS校验逻辑，直接当作自定义属性处理——这不是约定俗成，而是CSS规范强制要求的语法分隔机制。

--

不是可选前缀，而是解析开关浏览器引擎（如Blink、Gecko）在解析样式表时，会先按标准CSS属性名做白名单匹配；只有以

--

开头的键名，才会被识别为“待求值的自定义属性”，进而允许后续用

var()

引用。不加

--

，哪怕写成

color: var(main-color)

，也会报

Invalid property name

或静默忽略。命名里能用中文、数字开头，但

--

不能省虽然

--1

、

--你好

、

--_test

都合法，但去掉

--

就彻底失效：使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更下载

:root { --primary: #333; }

✅ 可被

var(--primary)

读取

:root { primary: #333; }

❌ 这只是无效声明，不进入自定义属性作用域

:root { -primary: #333; }

❌ 单横线是厂商前缀语法，和自定义属性无关容易忽略的大小写敏感和作用域陷阱

--HeaderColor

和

--headercolor

是两个完全不同的变量；且

--

只影响声明侧，引用时

var(--HeaderColor)

必须严格匹配大小写。另外，

--

本身不决定作用域——作用域由声明位置决定：

:root

里声明的是全局，

.btn

里声明的只在该选择器内生效，但无论在哪声明，

--

这个前缀都不可少。立即学习 “ 前端免费学习笔记（深入） ”；

相关文章