初次接触CSS变量需要掌握哪些核心知识点

CSS变量正式名称为自定义属性，是CSS原生支持的变量机制，允许开发者在样式中定义可复用的值，修改时只需要调整变量定义就能同步更新所有引用位置，大幅降低样式维护成本。

CSS变量的基本声明

CSS变量需要以两个减号--作为前缀，通常定义在:root伪类中实现全局可用，也可以定义在具体选择器内实现局部作用域。声明语法如下：

/* 全局CSS变量，定义在根元素上 */
:root {
  --primary_color: #165dff;
  --font_size_base: 14px;
  --border_radius: 4px;
}

/* 局部CSS变量，仅在该类选择器内可用 */
.card {
  --card_bg: #f5f5f5;
  --card_padding: 16px;
}

CSS变量的使用规则

使用CSS变量需要通过var()函数调用，还可以设置默认值，当变量未定义时会使用默认值兜底。使用示例如下：

.btn {
  /* 使用全局变量，设置默认值#333防止变量未定义 */
  color: var(--primary_color, #333);
  font-size: var(--font_size_base);
  border-radius: var(--border_radius);
  padding: 8px 16px;
}

.card {
  background: var(--card_bg);
  padding: var(--card_padding);
  /* 局部变量未定义时使用默认值 */
  border: 1px solid var(--card_border, #e5e5e5);
}

CSS变量的作用域特性

CSS变量的作用域和CSS选择器的优先级规则一致，内层定义的变量会覆盖外层同名变量，子元素可以继承父元素定义的变量。可以通过下面的示例理解作用域：

:root {
  --text_color: #333;
}

.dark-mode {
  /* 在dark-mode类下重新定义变量，覆盖全局值 */
  --text_color: #fff;
  --bg_color: #1a1a1a;
}

.page {
  color: var(--text_color);
  background: var(--bg_color, #fff);
}

当元素添加了dark-mode类时，会优先使用该类下定义的--text_color，未定义--bg_color的元素会使用默认值白色。

CSS变量的常见应用场景

1. 样式复用减少重复代码

当多个元素需要使用相同的颜色、间距、字体大小时，只需要定义一次变量，后续直接调用，修改时只需要调整变量值即可，不需要逐个修改样式。

2. 实现动态主题切换

配合JavaScript修改根元素或者容器元素的变量值，就能快速切换整体主题，不需要重写大量样式。示例代码如下：

// 切换到暗色主题
function switchDarkTheme() {
  document.documentElement.style.setProperty('--primary_color', '#f5f5f5');
  document.documentElement.style.setProperty('--bg_color', '#1a1a1a');
}

// 切换到亮色主题
function switchLightTheme() {
  document.documentElement.style.setProperty('--primary_color', '#165dff');
  document.documentElement.style.setProperty('--bg_color', '#fff');
}

3. 响应式布局适配

可以在不同媒体查询中修改变量值，实现不同屏幕尺寸下的样式适配，不需要重复写媒体查询内的样式规则。

:root {
  --content_width: 1200px;
}

@media (max-width: 768px) {
  :root {
    --content_width: 100%;
  }
}

.container {
  width: var(--content_width);
  margin: 0 auto;
}

注意事项

• CSS变量名区分大小写，--Color和--color是两个不同的变量
• CSS变量的值可以包含任意有效的CSS值，包括长度、颜色、字符串、函数等
• CSS变量不能直接用于属性名、选择器名称，只能用于属性值位置
• 如果需要兼容旧版浏览器，需要提前确认目标浏览器的支持情况，必要时添加兜底样式

CSS变量custom_properties样式复用动态主题作用域修改时间：2026-06-07 02:47:36