在CSS中使用var变量设置颜色是提升样式可维护性的重要方式，通过预定义颜色变量，可以避免在样式表中反复书写相同的颜色值，后续修改颜色时只需要调整变量定义即可全局生效。
CSS变量var的基础定义
CSS变量也叫做自定义属性，声明时需要在属性名前添加两个连字符--，变量值可以是任意有效的CSS值，包括颜色值。变量声明通常放在:root伪类中实现全局生效，也可以放在具体选择器内实现局部作用域生效。
定义颜色变量的基础语法如下：
/* 全局颜色变量定义 */
:root {
--primary_color: #1890ff;
--secondary_color: #52c41a;
--danger_color: #ff4d4f;
--text_color: #333333;
}
/* 局部颜色变量定义，仅在.card元素内生效 */
.card {
--card_bg_color: #f5f5f5;
}
使用var调用颜色变量
定义好颜色变量后，通过var()函数调用变量即可使用对应的颜色值，var()函数的第一个参数是变量名，第二个可选参数是 fallback 值，当变量未定义时会使用 fallback 值。
以下是调用颜色变量的示例：
/* 使用全局颜色变量 */
.header {
background-color: var(--primary_color);
color: var(--text_color);
}
.btn-primary {
background-color: var(--primary_color);
border-color: var(--primary_color);
}
.btn-danger {
background-color: var(--danger_color);
}
/* 使用局部颜色变量 */
.card {
background-color: var(--card_bg_color);
color: var(--text_color);
}
/* 带fallback值的调用，当--unknown_color未定义时使用#666666 */
.footer {
color: var(--unknown_color, #666666);
}
颜色变量的常见使用场景
主题切换
通过修改变量值可以快速实现主题切换，比如定义浅色和深色两套颜色变量，切换主题时只需要替换:root下的变量值即可。
/* 浅色主题 */
:root {
--bg_color: #ffffff;
--text_color: #333333;
}
/* 深色主题，通过给html添加dark类触发 */
html.dark {
--bg_color: #1f1f1f;
--text_color: #e8e8e8;
}
body {
background-color: var(--bg_color);
color: var(--text_color);
transition: background-color 0.3s, color 0.3s;
}
组件样式复用
在组件开发中，将组件常用的颜色定义为局部变量，可以提升组件的复用性，不同场景下只需要修改变量值就能适配不同的样式需求。
/* 基础按钮组件 */
.btn {
padding: 8px 16px;
border-radius: 4px;
border: 1px solid transparent;
/* 定义组件局部颜色变量 */
--btn_bg: #f0f0f0;
--btn_text: #333333;
background-color: var(--btn_bg);
color: var(--btn_text);
}
/* 成功按钮变体，修改变量值即可 */
.btn-success {
--btn_bg: var(--secondary_color);
--btn_text: #ffffff;
}
/* 警告按钮变体 */
.btn-warning {
--btn_bg: #faad14;
--btn_text: #ffffff;
}
注意事项
- CSS变量名区分大小写，
--Primary_Color和--primary_color是两个不同的变量。 - 变量声明的作用域规则和普通CSS属性一致，内层作用域的变量会覆盖外层同名的变量。
- var函数只能用在属性值的位置，不能用作属性名或者选择器名。
- 颜色变量的值可以是十六进制、rgb、rgba、hsl、hsla等任意CSS支持的颜色格式。
合理使用CSS变量管理颜色，可以让样式代码更简洁，后续维护成本更低，尤其适合中大型项目和多主题需求的场景。