CSS变量

CSS变量（也称为CSS自定义属性）允许你在CSS中定义可重用的值，使样式更加一致、易于维护和动态。CSS变量是CSS中最强大的特性之一，它可以帮助你创建更灵活、更易于维护的样式表。

基础语法

CSS变量以--开头，后跟变量名。可以在任何CSS规则中定义变量，但通常在:root伪类中定义全局变量。

css

/* 全局变量 */
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 16px;
}

/* 局部变量 */
.container {
  --container-padding: 20px;
}

使用var()函数来引用变量：

css

.element {
  color: var(--primary-color);
  font-size: var(--font-size);
}

.container {
  padding: var(--container-padding);
}

变量的作用域

CSS变量的作用域与CSS规则的作用域相同：

在:root中定义的变量是全局变量，可以在整个文档中使用
在特定选择器中定义的变量是局部变量，只能在该选择器及其子选择器中使用

css

:root {
  --global-color: red;
}

.container {
  --local-color: blue;
  color: var(--local-color); /* 使用局部变量 */
}

.child {
  color: var(--local-color); /* 可以访问父元素的局部变量 */
  background-color: var(--global-color); /* 可以访问全局变量 */
}

.other {
  color: var(--local-color); /* 无法访问.container的局部变量 */
}

变量的继承

CSS变量会被子元素继承，这意味着子元素可以访问父元素中定义的变量。

css

.parent {
  --parent-color: red;
}

.child {
  color: var(--parent-color); /* 继承父元素的变量 */
}

变量的默认值

var()函数可以接受第二个参数作为默认值，当变量未定义时使用。

css

.element {
  color: var(--undefined-color, blue); /* 如果--undefined-color未定义，将使用blue */
}

变量的操作

CSS变量可以与其他CSS值结合使用，也可以进行简单的数学运算。

与其他值结合

css

:root {
  --base-font-size: 16px;
  --heading-font-size: calc(var(--base-font-size) * 2);
}

h1 {
  font-size: var(--heading-font-size); /* 32px */
}

数学运算

使用calc()函数可以对变量进行数学运算：

css

:root {
  --spacing-unit: 10px;
}

.element {
  margin: calc(var(--spacing-unit) * 2); /* 20px */
  padding: calc(var(--spacing-unit) + 5px); /* 15px */
  width: calc(100% - var(--spacing-unit) * 4); /* 100%减去40px */
}

颜色操作

可以使用rgba()函数结合变量创建新的颜色：

css

:root {
  --primary-color: #3498db;
}

.element {
  background-color: var(--primary-color);
  box-shadow: 0 0 10px rgba(var(--primary-color), 0.5); /* 注意：这不会直接工作，因为var(--primary-color)返回的是#3498db */
}

对于颜色操作，需要将颜色分解为RGB或HSL值：

css

:root {
  --primary-color-red: 52;
  --primary-color-green: 152;
  --primary-color-blue: 219;
}

.element {
  background-color: rgb(var(--primary-color-red), var(--primary-color-green), var(--primary-color-blue));
  box-shadow: 0 0 10px rgba(var(--primary-color-red), var(--primary-color-green), var(--primary-color-blue), 0.5);
}

动态修改变量

CSS变量可以通过JavaScript动态修改，这使得创建主题切换、交互式UI等功能变得非常容易。

javascript

// 获取根元素
const root = document.documentElement;

// 设置变量值
root.style.setProperty('--primary-color', '#e74c3c');

// 获取变量值
const primaryColor = getComputedStyle(root).getPropertyValue('--primary-color');
console.log(primaryColor); // 输出: #e74c3c

变量的最佳实践

命名规范

为变量使用有意义的名称，并遵循一致的命名规范：

css

/* 推荐的命名方式 */
:root {
  --color-primary: #3498db;
  --color-secondary: #2ecc71;
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 20px;
  --spacing-lg: 30px;
  --font-size-sm: 12px;
  --font-size-md: 16px;
  --font-size-lg: 24px;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

组织变量

将变量组织成逻辑组，例如颜色、间距、字体大小等：

css

:root {
  /* 颜色 */
  --color-primary: #3498db;
  --color-secondary: #2ecc71;
  --color-text: #333333;
  --color-background: #ffffff;
  --color-border: #eeeeee;
  
  /* 间距 */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 20px;
  --spacing-lg: 30px;
  --spacing-xl: 40px;
  
  /* 字体 */
  --font-family: Arial, sans-serif;
  --font-size-sm: 12px;
  --font-size-md: 16px;
  --font-size-lg: 24px;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  
  /* 边框 */
  --border-width: 1px;
  --border-style: solid;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  
  /* 阴影 */
  --box-shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
  --box-shadow-md: 0 4px 8px rgba(0,0,0,0.1);
  --box-shadow-lg: 0 8px 16px rgba(0,0,0,0.1);
}

主题切换

使用CSS变量实现主题切换是最常见的应用之一：

css

:root {
  --color-primary: #3498db;
  --color-background: #ffffff;
  --color-text: #333333;
}

[data-theme="dark"] {
  --color-primary: #9b59b6;
  --color-background: #2c3e50;
  --color-text: #ffffff;
}

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

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

结合JavaScript切换主题：

javascript

function toggleTheme() {
  const root = document.documentElement;
  const currentTheme = root.getAttribute('data-theme');
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  root.setAttribute('data-theme', newTheme);
}

浏览器兼容性

CSS变量在现代浏览器中有很好的支持：

Chrome 49+
Firefox 31+
Safari 9.1+
Edge 16+
IE 不支持

对于旧版本浏览器的支持，可以使用CSS预处理器（如Sass、Less）的变量功能，或者使用JavaScript polyfill。

CSS变量 vs 预处理器变量

CSS变量与Sass、Less等预处理器的变量有一些重要的区别：

特性	CSS变量	预处理器变量
作用域	基于CSS选择器	全局或局部（基于预处理器语法）
动态修改	可以通过JavaScript动态修改	编译后固定，无法动态修改
继承	支持继承	不支持继承
默认值	支持默认值	不支持默认值
浏览器支持	现代浏览器支持	编译后生成普通CSS，支持所有浏览器

总结

CSS变量是CSS中最强大的特性之一，它可以帮助你：

创建更一致、更易于维护的样式
实现动态主题切换
减少样式代码的重复
提高样式的灵活性

通过合理使用CSS变量，你可以创建更高效、更易于维护的样式表，提高开发效率和用户体验。