CSS自定义属性（CSS变量）

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

1. 标准语法

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

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

css 复制代码

/* 全局定义在:root伪类中，作用于整个文档 */
:root {
  --primary-color: #3498db; /* 定义颜色变量 */
  --spacing-unit: 16px;     /* 定义间距变量 */
}

/* 局部定义在特定选择器中，仅作用于该元素及其子元素 */
.container {
  --border-width: 2px;      /* 定义边框宽度变量 */
}

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

css 复制代码

.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中定义的变量，可在整个文档中访问，类似全局常量。

css 复制代码

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

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

css 复制代码

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

常见使用场景：

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

css 复制代码

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

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

css 复制代码

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

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

css 复制代码

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

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

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规则：检测浏览器是否支持自定义属性，确保优雅降级。

css 复制代码

@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')：获取计算后的变量值。
示例：实现主题切换按钮。

javascript 复制代码

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);
});

相关特性：
- 继承性：变量值可被子元素继承，但需注意作用域链。
- 回退机制 ：var()函数的fallback参数增强鲁棒性。
- 浏览器支持：现代浏览器（Chrome、Firefox、Safari、Edge）均支持，IE不支持（需PostCSS等插件填充）。

注意事项

性能：过度使用变量可能导致渲染性能下降，建议在关键路径外使用。
兼容性 ：旧版浏览器需借助PostCSS Custom Properties等插件实现兼容1。
最佳实践 ：变量名应语义化（如--color-primary），避免滥用。