CSS 变量（自定义属性）详解

CSS 变量（Custom Properties）是现代 CSS 的强大功能，允许我们定义可复用的值，并在 CSS 文件中动态使用这些值。使用 CSS 变量可以大幅提升代码的可维护性和灵活性。

1. CSS 变量的语法

定义变量

CSS 变量必须以 -- 开头，并且定义在选择器的作用域中。通常放在 :root（全局作用域）中，便于全局使用：

:root {
  --main-color: #3498db;
  --font-size: 16px;
  --spacing: 1rem;
}

使用变量

通过 var() 函数来引用 CSS 变量：

h1 {
  color: var(--main-color);
  font-size: var(--font-size);
  margin-bottom: var(--spacing);
}

提供备用值

可以为 var() 函数设置默认值，当变量未定义时使用默认值：

h1 {
  color: var(--secondary-color, #2ecc71); /* 如果 --secondary-color 未定义，则使用 #2ecc71 */
}

2. 变量的作用域

CSS 变量是基于作用域的，遵循层级规则：

• 全局变量：  定义在 :root 中的变量可以在整个文档中使用。

• 局部变量：  定义在某个选择器中，仅在该选择器的作用域内生效。

  :root {
    --main-color: #3498db;
  }
  
  .container {
    --main-color: #e74c3c; /* 覆盖全局变量 */
  }
  
  h1 {
    color: var(--main-color); /* 在不同作用域中使用不同的值 */
  }
  

3. 动态更新 CSS 变量

CSS 变量可以通过 JavaScript 动态修改，非常适合用于主题切换、响应式设计等场景。

示例：动态切换主题

HTML：

<div class="theme-toggle">
  <button onclick="setLightTheme()">Light Theme</button>
  <button onclick="setDarkTheme()">Dark Theme</button>
</div>

CSS：

:root {
  --background-color: #ffffff;
  --text-color: #000000;
}

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

JavaScript：

function setLightTheme() {
  document.documentElement.style.setProperty('--background-color', '#ffffff');
  document.documentElement.style.setProperty('--text-color', '#000000');
}

function setDarkTheme() {
  document.documentElement.style.setProperty('--background-color', '#000000');
  document.documentElement.style.setProperty('--text-color', '#ffffff');
}

4. 嵌套变量

CSS 变量可以与其他变量嵌套使用：

:root {
  --base-spacing: 1rem;
  --padding: var(--base-spacing);
}

div {
  padding: var(--padding);
}

5. 应用场景

主题切换

通过定义一组主题变量，快速实现多主题切换：

:root {
  --background: #ffffff;
  --text-color: #000000;
}

.dark-theme {
  --background: #000000;
  --text-color: #ffffff;
}

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

响应式设计

利用媒体查询动态更新变量值：

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

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

p {
  font-size: var(--font-size);
}

统一管理间距和颜色

通过变量统一管理设计系统中的颜色、间距、字体大小等：

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --spacing-small: 0.5rem;
  --spacing-medium: 1rem;
  --spacing-large: 2rem;
}

button {
  background-color: var(--primary-color);
  padding: var(--spacing-small) var(--spacing-medium);
}

6. CSS 变量 vs 预处理器变量

特性	CSS 变量	预处理器变量（如 SCSS）
语法	原生 CSS 支持	需要借助工具（如 Sass/LESS）
作用域	基于 DOM 层级作用域	文件作用域（编译后不可更改）
动态更新	支持（通过 JavaScript 修改）	不支持
浏览器支持	支持现代浏览器	需编译为原生 CSS

7. 浏览器支持

CSS 变量在现代浏览器中已广泛支持，但不支持 IE 浏览器。如果需要兼容性，可以结合 Polyfill 或提供备用样式。

8. 总结

CSS 变量是现代 CSS 开发的重要工具，能够帮助开发者：

• 简化代码管理：  提高代码复用性和可维护性。
• 动态更新样式：  实现实时的样式调整，比如主题切换。
• 增强灵活性：  结合 JavaScript，可以实现更复杂的交互效果。