CSS变量正式名称为CSS自定义属性，是CSS原生支持的样式变量机制，允许开发者定义可复用的样式值，后续可以在样式规则中直接引用，避免了大量重复的样式代码编写，也方便后续统一修改样式值。
CSS变量的基础定义与语法
CSS变量的定义需要使用--作为前缀，通常定义在:root伪类中，这样定义的变量可以在整个文档中生效。:root对应HTML文档的根元素，也就是<html>标签。
定义变量的基本语法如下：
/* 在根元素定义全局CSS变量 */
:root {
--primary_color: #1890ff;
--default_font_size: 14px;
--card_padding: 16px;
}
变量定义完成后，需要使用var()函数来引用变量，不能直接使用变量名作为样式值。var()函数还支持设置默认值，当引用的变量不存在时，会使用默认值作为样式值。
引用变量的语法示例如下：
/* 引用全局变量，无默认值 */
.btn-primary {
background-color: var(--primary_color);
font-size: var(--default_font_size);
}
/* 引用变量并设置默认值，当--custom_radius不存在时使用8px */
.card {
padding: var(--card_padding);
border-radius: var(--custom_radius, 8px);
}
CSS变量的作用域规则
CSS变量的作用域和CSS样式的优先级规则一致，变量的生效范围由定义它的选择器决定。在:root中定义的变量是全局变量，所有元素都可以引用；在某个具体选择器中定义的变量是局部变量，只有该选择器及其子元素可以引用。
下面的示例展示了局部变量的作用范围：
/* 局部变量，仅在.page-header及其子元素中生效 */
.page-header {
--header_bg: #f5f5f5;
background-color: var(--header_bg);
}
/* 子元素可以引用父元素定义的局部变量 */
.page-header h1 {
color: var(--header_bg); /* 这里会获取到父元素的--header_bg值 */
}
/* 其他元素无法引用.page-header中定义的局部变量 */
.page-content {
background-color: var(--header_bg, #ffffff); /* 使用默认值#ffffff，因为当前作用域没有该变量 */
}
如果局部变量和全局变量同名，局部变量的优先级更高，会覆盖全局变量的值，这个特性和CSS样式层叠规则一致。
CSS自定义属性的常见应用场景
1. 主题切换功能实现
通过动态修改根元素上的CSS变量值，可以快速实现整个页面的主题切换，不需要逐个修改每个元素的样式规则。实现思路是定义不同主题对应的变量值集合，切换主题时替换:root上的变量值。
具体实现代码示例如下：
/* 默认亮色主题变量 */
:root {
--bg_color: #ffffff;
--text_color: #333333;
--border_color: #e8e8e8;
}
/* 暗色主题变量 */
[data-theme="dark"] {
--bg_color: #1f1f1f;
--text_color: #e8e8e8;
--border_color: #434343;
}
// 切换主题的JS代码
function switchTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
// 可以存储用户选择的主题到本地存储
localStorage.setItem('theme', theme);
}
// 初始化时读取存储的主题
const savedTheme = localStorage.getItem('theme') || 'light';
switchTheme(savedTheme);
/* 元素使用主题变量 */
body {
background-color: var(--bg_color);
color: var(--text_color);
}
.card {
border: 1px solid var(--border_color);
}
2. 响应式布局适配
结合媒体查询，可以在不同屏幕尺寸下修改CSS变量的值，实现响应式的样式调整，不需要为每个屏幕尺寸编写重复的样式规则。
示例代码如下：
:root {
--content_width: 1200px;
--grid_gap: 20px;
}
/* 平板屏幕尺寸下修改变量值 */
@media (max-width: 768px) {
:root {
--content_width: 100%;
--grid_gap: 12px;
}
}
/* 手机屏幕尺寸下修改变量值 */
@media (max-width: 480px) {
:root {
--content_width: 100%;
--grid_gap: 8px;
}
}
.container {
max-width: var(--content_width);
margin: 0 auto;
}
.grid-layout {
display: grid;
gap: var(--grid_gap);
}
3. 组件样式复用与统一修改
在开发组件库时，可以将组件的基础样式值定义为CSS变量，使用者可以通过覆盖变量值来定制组件样式，不需要修改组件本身的样式代码，提升组件的灵活性。
组件变量定义示例：
/* 按钮组件基础样式 */
.btn {
padding: var(--btn_padding, 8px 16px);
border-radius: var(--btn_radius, 4px);
font-size: var(--btn_font_size, 14px);
border: 1px solid var(--btn_border_color, #d9d9d9);
background-color: var(--btn_bg, #ffffff);
color: var(--btn_text_color, #333333);
}
/* 使用者自定义按钮样式，只需要覆盖变量即可 */
.custom-btn {
--btn_bg: #722ed1;
--btn_text_color: #ffffff;
--btn_border_color: #722ed1;
}
CSS变量使用的注意事项
- CSS变量名区分大小写，
--Color和--color是两个不同的变量。 - CSS变量的值可以是任意有效的CSS值，包括颜色、长度、字符串、甚至calc()表达式。
- CSS变量不能直接用于媒体查询的条件中，比如不能写成
@media (min-width: var(--breakpoint))，媒体查询不支持变量解析。 - CSS变量可以通过JS动态读取和修改，使用
getComputedStyle读取，使用setProperty修改，这点和普通CSS属性操作一致。
JS操作CSS变量的示例：
// 读取根元素上的CSS变量值
const rootStyles = getComputedStyle(document.documentElement);
const primaryColor = rootStyles.getPropertyValue('--primary_color').trim();
console.log(primaryColor); // 输出#1890ff
// 修改根元素上的CSS变量值
document.documentElement.style.setProperty('--primary_color', '#ff4d4f');
CSS变量CSS自定义属性css_custom_property前端样式开发样式复用修改时间：2026-06-25 21:39:39