前言
石匠敲击石头的第 12 次
CSS 自定义属性是现代 CSS 的一个强大特性，可以说是前端开发需知、必会的知识点，本篇文章就来好好梳理一下，如果哪里写的有问题欢迎指出。
什么是 CSS 自定义属性
CSS 自定义属性英文全称是 CSS Custom Properties，简称自定义属性，也被称为 CSS 变量，是允许开发者样式表中定义和重复使用值的一种机制，类似于其它编程语言（如 JavaScript 等）中的变量。
为什么需要 CSS 自定义属性
CSS 语言是一种声明式语言，不像其它语言有变量、条件和逻辑等特性，导致在维护、复用、动态控制方面存在不少局限。
正因如此，社区中诞生了各种 CSS 预处理器，如 Sass（Scss）、Less、Stylus 等。它们通过引入变量、运算、条件语句等机制，弥补了原生 CSS 的不足，大大提高了样式开发的效率与可维护性。
其中，变量功能尤其重要，它让我们可以在多个地方复用相同的值，一旦需要修改，只需改一处，大幅降低了维护成本，但预处理器的变量是在编译阶段生效的，无法在浏览器中运行时动态更新，也不能与 DOM 或 JavaScript 交互。
为了解决这一问题，CSS 自定义属性应运而生。
基础语法
变量声明
CSS 变量的声明由 -- 开头，便于浏览器区分自定义属性和原生属性。
.box {
--color: red;
color: red;
}
上述代码中 color 是原生属性，--color 则是自定义属性。
自定义属性支持各种值。
:root {
--link: 'link';
--color: #f00;
--back-ground: red;
--height: 68px;
--padding: 10px 20px;
--line-height: 1.5;
--transition-duration: 0.5s;
--margin-top: calc(2vh + 20px);
}
⚠️ 注意：
-
变量名命名规则比较松散，可以是任何有效的字符，比如：
中文、大写字母、驼峰命名、中距线、emoji和HTML实体等:root { --COLOR: #f00; --color: #f00; --内边距: 10px; --backGround: red; --calc: 10px; --🤪: '哈哈哈'; --©: '版权'; } -
变量名大小写敏感，
--color和--COLOR是两个不同的变量 -
变量是和选择器是强绑定的，只能在声明块或者元素的内联样式中声明变量
--color: red; /* 无效声明 */ :root { --color: red; /* 有效声明 */ }<!-- 在元素的内联样式中声明变量 --> <div style="--color: red;">文字</div>⚠️ 注意： 在元素的内联样式中声明自定义属性可以通过 JavaScript 动态控制。
变量使用
通过使用 var() 函数来使用变量。
.box {
color: var(--color);
}
var() 函数可以接受两个值，第一个值是 CSS 自定义属性，第二个值是一个回退值，回退值在第一个值（CSS 自定义属性）无效时保证 var() 函数有值。
.box {
color: var(--color, #fff);
}
上述代码中如果 --color 不存在，则使用回退值 #fff。
⚠️ 注意：
-
var()函数第二个参数不处理内部的逗号或空格，都视为参数的一部分.box { padding: var(--pad, 10px 15px 20px); } -
变量值只能用作属性值，不能用作属性名
.box { var(--margin): 20px; /* 无效 */ } -
如果变量值是字符串，可以与其它字符串拼接
.box { --string: 'hello'; --string2: var(--string)' world'; } -
如果变量值是数值，不能与数值单位拼接使用
.box { --height: 20; height: var(--height)px; /* 无效 */ }必须使用
calc()函数将它们连接起来。.box { --height: 20; height: calc(var(--height) * 1px); /* 有效 */ } -
如果变量值带单位，则不能写成字符串
/* 无效 */ .box { --height: '20px'; height: var(--height); } /* 有效 */ .box { --height: 20px; height: var(--height); } -
如果变量值对于 CSS 属性来说是一个无效值时，会做降级处理
.box { --height: 20px; color: var(--height); }上述代码中，
color属性不支持20px，会被降级为initial（在 Chrome 浏览器中是一个#000的颜色值），如果var()函数中有第二个参数，并且第二个参数值是有效值，则降级为第二个参数值。.box { --height: 20px; color: var(--height, red); /* 等同于 color: red; */ } -
CSS 变量不能循环使用
:root { --color: red; --color: var(--red); /* 无效 */ } .box { /* 降级为 initial，在 Chrome 浏览器中等同于 color: #000; */ color: var(--color); }上述代码中，在同一个选择器块内重复声明了
--color，后者把前者覆盖，所以引用的是自身。
变量作用域
同一个 CSS 变量，可以在多个不同的选择器中声明，读取的时候依照层叠优先级规则判断的流程，关于这块知识点具体的内容，可以看我之前写的这篇文章。
举个例子
<style>
:root {
--color: blue;
}
div {
--color: green;
}
#alert {
--color: red;
}
* {
color: var(--color);
}
</style>
<p>蓝色</p>
<div>绿色</div>
<div id="alert">红色</div>
在这个示例中，--color 变量被分别定义在 :root、div、#alert 这三个不同的选择器中。由于 CSS 遵循**“就近优先”** 的规则，每个元素会使用作用于自己最近的变量定义，因此三段文字最终呈现出不同的颜色。
由此可见，CSS 变量的作用域就是它所定义的选择器的作用范围。具体来说：
:root选择器中的--color定义在<html>元素上，会被其所有后代元素继承（除非被更具体的选择器覆盖），适合定义全局变量p选择器中的--color只影响<p>元素及其后代.class选择器中的--color仅作用于类名为.class的元素及其后代#id选择器中的--color只作用于指定id的元素及其后代
之所以变量能传递到后代，是因为 CSS 自定义属性是支持继承的，这点类似 color、font-family 等属性。如果你对继承机制感兴趣，可以参考我写过的另一篇文章。
在 @ 规则中的使用
CSS 自定义属性支持 @media、@keyframes 等规则中使用。
.box {
--color: red;
--background: green;
--from-color: red;
--to-color: lime;
animation: animation 1s infinite;
}
/* 在 @media 中使用 */
@media screen and (min-width: 768px) {
.box {
--color: black;
--background: #fff;
}
}
/* 在 @keyframes 中使用 */
@keyframes animation {
from {
background-color: var(--from-color);
}
to {
background-color: var(--to-color);
}
}
⚠️ 注意： CSS 自定义属性（变量）不能用于媒体查询或选择器中，包括像 :nth-child() 这样的结构性伪类选择器。
:root {
--num: 2;
--breakpoint: 30em;
}
div:nth-child(var(--num)) { /* 无效：变量不能用于选择器中 */
color: var(--color)
}
@media screen and (min-width: var(--breakpoint)) { /* 无效：变量不能用于媒体查询 */
:root {
--color: green;
}
}
兼容性处理
CSS 自定义属性在现代浏览器中已经有了较好的支持，具体可以参考CSS Variables (Custom Properties)。
对于不支持的浏览器，可以使用下面的写法。
:root {
--primary-color: #f00;
}
.box {
color: #f00; /* 回退值 */
color: var(--primary-color); /* 优先使用变量 */
}
也可以使用 @support 进行特性检测。
:root {
--primary-color: #f00;
}
/* 支持 CSS 变量 */
@supports (--primary-color: #f00) {
.box {
color: var(--primary-color);
}
}
/* 不支持，执行降级处理 */
@supports not (--primary-color: #f00) {
.box {
color: #f00;
}
}
也可以通过 JavaScript 来检测浏览器是否支持 CSS 变量。
const isSupported =
window.CSS &&
window.CSS.supports &&
window.CSS.supports('--primary-color', #f00);
if (isSupported) {
// 支持 CSS 变量，执行相关逻辑
} else {
// 不支持，执行降级处理
}
⚠️ 注意： 如果你的项目使用构建工具，推荐使用 postcss-custom-properties 插件，自动将 CSS 变量编译为静态值，生成兼容所有浏览器的 CSS。
使用 JavaScript 操作变量
CSS 自定义属性和其它 CSS 属性一样，可以通过 CSSOM 中的一些 API 来操作：
-
从内联样式中读取变量
document.body.style.getPropertyValue('--color').trim(); -
将变量设置在内联样式中
document.body.style.setProperty('--color', '#f00'); -
从计算样式中获取变量（包含继承和外部样式）
window.getComputedStyle(document.body).getPropertyValue('--color').trim();
CSS 变量和 CSS 预处理器变量的对比
从表面上看，CSS 自定义属性和 CSS 预处理器中的变量有点类似，但事实上它们之间有很大的差别，以下是两者的对比。
| 特性 | CSS 变量 (--color) | CSS 预处理器变量（如 $color） |
|---|---|---|
| 语法标准 | 原生 CSS 标准，受 W3C 支持 | 编译时语法，不属于 CSS 标准 |
| 运行时机 | 运行时，浏览器解析样式时生效 | 编译时，在构建阶段由工具转换成静态值 |
| 作用域 | 作用于DOM 结构，遵循层叠和继承规则 | 作用于代码结构（嵌套/模块），无层叠概念 |
| 是否可以被 JS 操作 | ✅ 可以动态读取和修改 | ❌ 不行，编译后变量信息已不存在 |
| 是否可以继承 | ✅ 可以被继承（像 color 一样） | ❌ 不具备继承机制 |
| 是否可用于媒体查询等结构中 | ❌ 不行，不能用于选择器、媒体查询等 | ✅ 可以在任何位置使用，包括条件、循环等 |
| 动态响应能力 | ✅ 可以根据状态变化（如主题切换）实时生效 | ❌ 编译时决定，无法响应 DOM 或用户交互 |
| 使用场景 | 主题切换、暗黑模式、组件 API、动态样式等 | 提高样式可维护性、模块化组织、函数/循环等 |
实践建议
-
使用命名规范区分变量作用域
- 全局作用域变量：使用大写字母命名
- 局部作用域变量：使用小写字母命名
:root { --PRIMARY-COLOR: #f00; /* 全局变量 */ } .box { --color: #fff; /* 局部变量 */ --button-primary: var(--PRIMARY-COLOR); }这样做有助于在开发时区分变量的来源。
-
避免直接重写全局变量，优先使用中间变量扩展
:root { --PRIMARY-COLOR: #f00; } .box { --PRIMARY-COLOR: green; background-color: var(--PRIMARY-COLOR); }上述代码，语法上是对的，但是会有以下几个问题：
- 破坏变量体系的一致性： 你在
.box中重写了--PRIMARY-COLOR，导致它的含义发生改变，这种“同名变量局部重写”非常容易引起维护混乱 - 主题切换时不可控：如果你有个切换主题的机制想要统一更新
--PRIMARY-COLOR，这个.box里的值就会 “失控”，不会随主题变化 - 变量来源不清晰：团队协作时别人看到
--PRIMARY-COLOR可能以为是全局值，其实是局部覆盖，容易出问题
建议是通过中间变量（注入点）扩展全局变量。
:root { --PRIMARY-COLOR: var(--user-color, #f00); } .box { --user-color: green; background-color: var(--PRIMARY-COLOR); }这样做有以下几个好处：
- 统一变量入口： 所有使用
--PRIMARY-COLOR的地方都遵循同一套逻辑 - 主题切换友好： 只要全局改了
--user-color，所有地方都会同步响应 - 变量继承清晰： 任何定制化都是通过“注入”变量完成的，结构清晰、可控
- 破坏变量体系的一致性： 你在
-
将变量声明和 CSS 属性声明分开
例如下面这段代码
<button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-danger">Danger</button>btn是按钮基本类名，btn-primary和btn-danger是扩展类名
我们对比两个扩展类名，可以发现不同的风格的按钮具有相同的 CSS 属性，只是值不同。
这时最好的方式就是使用 CSS 变量将值抽离出来。
.btn { /* 其它基础样式... */ color: var(--color); background-color: var(--background-color); border: 1px solid var(--border-color); }将扩展类名调整为 CSS 变量，这样在改变按钮风格的时候就简便很多。
总结
- CSS 变量是一种允许在样式表中定义和复用值的机制，类似于编程语言中的变量
- 相较于预处理器变量，CSS 变量支持运行时更新，可与 DOM 和 JavaScript 动态交互，更适合构建灵活的 UI
- 变量遵循作用域和继承规则，可实现主题切换、组件自定义等需求
- 建议使用统一命名规范，避免直接覆盖全局变量，优先通过中间变量扩展
- 将变量声明与样式声明分离，有助于提升样式复用性和可维护性
参考文章
- 浅谈原生CSS变量（自定义属性）在CSS中使用变量并不是一个稀罕事，早在2007年Sass的诞生，就可以通过预处理的方式 - 掘金
- CSS 变量教程 - 阮一峰的网络日志
- 【实战技巧】CSS自定义属性以及在VUE3中的使用官方称之为自定义属性 ,但我比较习惯叫它变量 ,简单点说就是一种开发者 - 掘金
- 图解CSS：CSS自定义属性 - 前端开发者学堂 (fedev.cn) - 前端开发社区
博客地址：https://github.com/wjw020206/blog
