CSS变量(Custom Properties)

CSS变量，也称为自定义属性，是CSS3引入的一项强大功能。它允许开发者在样式表中定义可复用的值，并通过变量名引用这些值。这种方式不仅提高了代码的可维护性，还让动态调整样式变得更加灵活。

CSS变量的基本语法

CSS变量以两个连字符（--）开头，后跟变量名。定义变量时，通常将其放在:root伪类中，使其成为全局变量。例如：

:root {
  --primary-color: #3498db;
  --padding-large: 20px;
}

使用时，通过var()函数引用变量：

.button {
  background-color: var(--primary-color);
  padding: var(--padding-large);
}

变量名区分大小写，--color和--Color是两个不同的变量。如果变量未定义，可以提供一个备用值：

.element {
  color: var(--undefined-color, black);
}

CSS变量的作用域

CSS变量遵循级联规则，作用域分为全局和局部。全局变量通常在:root中定义，而局部变量可以在任何选择器中定义：

.container {
  --local-bg: #f1c40f;
  background-color: var(--local-bg);
}

子元素会继承父元素的变量值，但同名变量会覆盖父级定义：

.parent {
  --text-color: red;
}
.child {
  --text-color: blue; /* 覆盖父级的 --text-color */
}

CSS变量的动态特性

CSS变量可以在运行时通过JavaScript动态修改，这使得主题切换或响应式设计更加简单：

document.documentElement.style.setProperty('--primary-color', '#e74c3c');

媒体查询中也可以重新定义变量，实现响应式布局：

:root {
  --font-size: 16px;
}

@media (max-width: 768px) {
  :root {
    --font-size: 14px;
  }
}

CSS变量的实际应用

主题切换

通过修改变量值实现主题切换是CSS变量的典型应用：

:root {
  --bg-color: white;
  --text-color: black;
}

.dark-theme {
  --bg-color: #333;
  --text-color: white;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

构建间距系统

统一管理间距变量，确保设计一致性：

:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
}

.card {
  margin-bottom: var(--space-md);
  padding: var(--space-sm);
}

动画与过渡效果

CSS变量让动画参数更易调整：

:root {
  --rotate-degree: 0deg;
}

.spinner {
  transform: rotate(var(--rotate-degree));
  transition: transform 0.5s;
}

.spinner:hover {
  --rotate-degree: 360deg;
}

CSS变量的高级技巧

计算与单位转换

CSS变量可以与calc()结合使用：

:root {
  --base-size: 16;
}

.text {
  font-size: calc(var(--base-size) * 1px);
}

变量链式引用

变量可以引用其他变量：

:root {
  --primary: #3498db;
  --button-bg: var(--primary);
}

伪元素中的变量使用

伪元素同样可以访问变量：

.tooltip::after {
  content: var(--tooltip-text);
  background-color: var(--tooltip-bg);
}

CSS变量的浏览器支持与降级方案

现代浏览器普遍支持CSS变量，但对于旧版浏览器，可以提供降级方案：

.title {
  color: #2c3e50; /* 降级值 */
  color: var(--title-color);
}

使用@supports检测支持情况：

@supports (--css: variables) {
  /* CSS变量支持的样式 */
}

CSS变量的性能考量

CSS变量在性能上表现良好，但过度使用可能导致样式计算复杂度增加。避免在动画中频繁修改变量，尤其是在低性能设备上。