当前位置：首页 > news >正文

CSS自定义属性（CSS变量）

news 2025/8/23 13:14:16

CSS自定义属性（通常称为CSS变量）是CSS3引入的一项功能，它允许开发者在样式表中定义可重用的值，并在整个文档中引用这些值，从而提高代码的可维护性和灵活性。与Sass或LESS等预处理器变量不同，CSS变量使用原生CSS语法，无需额外工具即可在现代浏览器中运行。

1. 标准语法

CSS自定义属性的语法遵循W3C标准，分为定义和使用两个部分：

定义变量：使用--前缀声明变量名，后跟冒号和值。变量名区分大小写，通常采用kebab-case（短横线分隔）命名约定。

/* 全局定义在:root伪类中，作用于整个文档 */
:root {--primary-color: #3498db; /* 定义颜色变量 */--spacing-unit: 16px;     /* 定义间距变量 */
}/* 局部定义在特定选择器中，仅作用于该元素及其子元素 */
.container {--border-width: 2px;      /* 定义边框宽度变量 */
}

使用变量：通过var()函数引用变量，可提供可选的fallback值（当变量未定义时使用）。

.button {background-color: var(--primary-color, #2980b9); /* 引用变量，fallback为#2980b9 */padding: var(--spacing-unit);border: var(--border-width, 1px) solid black;     /* fallback用于部分属性 */
}

关键规则：
- 变量值可以是任何CSS有效值（如颜色、长度、字符串等）。
- 变量支持动态计算，例如：calc(var(--spacing-unit) * 2)。
- 语法错误（如未闭合括号）会导致整个声明失效。

2. 用法详解

CSS变量的核心优势在于其作用域和动态性，适用于多种场景：

作用域（Scope）：

全局作用域：在:root中定义的变量，可在整个文档中访问，类似全局常量。

:root {--theme-bg: #f0f0f0; /* 全局背景色变量 */
}
body {background-color: var(--theme-bg);
}

局部作用域：在元素选择器内定义的变量，仅在该元素及其子元素中生效，支持继承性。

.card {--card-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 局部变量 */
}
.card-content {box-shadow: var(--card-shadow); /* 子元素可继承 */
}

常见使用场景：

主题切换（Theming）：通过修改变量值实现动态主题，例如暗黑模式切换。

:root {--text-color: #333; /* 默认亮色主题 */
}
.dark-theme {--text-color: #fff; /* 暗色主题覆盖 */
}
p {color: var(--text-color);
}

响应式设计：结合媒体查询调整变量值，无需重复代码。

:root {--font-size: 16px;
}
@media (max-width: 768px) {:root {--font-size: 14px; /* 小屏幕时调整字体大小 */}
}
body {font-size: var(--font-size);
}

代码复用：减少重复值，提升可维护性。例如，定义间距系统：

:root {--space-sm: 8px;--space-md: 16px;
}
.header { margin-bottom: var(--space-md); }
.footer { padding: var(--space-sm); }

动态修改：通过JavaScript实时更新变量，实现交互效果。

// 获取根元素
const root = document.documentElement;
// 修改变量值
root.style.setProperty('--primary-color', '#e74c3c');
// 读取变量值
const color = getComputedStyle(root).getPropertyValue('--primary-color');

3. API总结

CSS自定义属性的API主要围绕CSS属性和JavaScript接口，无复杂方法库：

CSS原生API：
- var(--name, fallback)：核心函数，用于引用变量。--name为变量名，fallback为可选回退值。
- @supports规则：检测浏览器是否支持自定义属性，确保优雅降级。

@supports (--foo: green) {/* 支持变量时应用样式 */body { color: var(--text-color); }
}
@supports not (--foo: green) {/* 不支持时使用fallback */body { color: #333; }
}

JavaScript API：

element.style.setProperty('--name', value)：动态设置变量值。
getComputedStyle(element).getPropertyValue('--name')：获取计算后的变量值。
示例：实现主题切换按钮。

document.getElementById('theme-toggle').addEventListener('click', () => {const root = document.documentElement;const currentColor = getComputedStyle(root).getPropertyValue('--primary-color');const newColor = currentColor === '#3498db' ? '#e74c3c' : '#3498db';root.style.setProperty('--primary-color', newColor);
});