3.1 CSS 变量（Custom Properties）

3.1 CSS 变量（Custom Properties）

什么是 CSS 变量？

CSS 变量，也叫做自定义属性（Custom Properties），是 CSS 中一种允许开发者创建可重用的变量的机制。它们的主要优势在于：可以在整个文档中使用相同的值而不需要重复定义，并且在 CSS 中修改变量的值时，所有引用该变量的地方都会即时更新。

CSS 变量的语法与常规 CSS 属性相似，但它们是以 -- 开头的自定义名称。比如：

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

上述代码中，--main-color 和 --font-size 就是自定义变量，它们被定义在 :root 选择器下，这使得这些变量在整个文档中都可以访问。

使用 CSS 变量

一旦变量定义完成，就可以在其他地方引用它们。引用变量时使用 var() 函数，语法如下：

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

这段代码将会把 --main-color 和 --font-size 的值应用到该元素上。

变量作用域

CSS 变量的作用域是基于其定义的位置的。变量可以在全局作用域（例如：:root）和局部作用域（例如：某个特定的类或元素）中定义。

• 全局作用域：当变量在 :root 或任何其他选择器中定义时，它们对整个文档可用。

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

• 局部作用域：变量也可以在局部选择器中定义，只能在该选择器及其子元素中使用。

  .button {
    --button-color: #e74c3c;
    background-color: var(--button-color);
  }
  

在此例中，.button 中的 --button-color 仅在该类内有效。

变量的继承

CSS 变量也可以继承。在父元素中定义的变量可以在其子元素中自动访问，除非在子元素中有相同名称的变量覆盖父元素的变量。

.parent {
  --color: red;
}

.child {
  color: var(--color); /* 子元素继承自父元素 */
}

在这个例子中，.child 会继承 .parent 中定义的 --color 变量。

变量的默认值

CSS 变量还允许设置默认值，以防止变量未定义时出现错误。使用 var() 函数时，可以为变量提供一个默认值作为备选项：

color: var(--background-color, #ffffff);  /* 如果 --background-color 没有定义，使用 #ffffff */

动态更新 CSS 变量

CSS 变量的一个重要特点是它们可以在运行时动态更新。这意味着，你可以使用 JavaScript 或者通过用户交互来改变 CSS 变量的值。

使用 JavaScript 更新 CSS 变量

可以通过 JavaScript 修改元素的 CSS 变量：

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

这段代码会将 --main-color 的值更改为红色，并且影响所有引用该变量的元素。

示例：动态切换主题

CSS 变量的动态更新特别适用于主题切换。例如，你可以创建一个简单的夜间模式和日间模式切换功能：

/* 默认（白天模式） */
:root {
  --background-color: white;
  --text-color: black;
}

.dark-mode {
  --background-color: black;
  --text-color: white;
}

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

通过添加或移除 dark-mode 类，你可以动态切换背景和文字的颜色：

function toggleTheme() {
  document.body.classList.toggle('dark-mode');
}

结论

CSS 变量是一个强大的工具，可以帮助开发者管理样式，避免重复，并提高可维护性。它们可以提升灵活性，特别是在需要动态改变样式或创建主题切换的场景中。