CSS 变量（Custom Properties）技术教程

CSS 变量（Custom Properties）是一种定义在 `:root` 选择器或在其他选择器内，并且可以在整个文档中重复使用的一组值。它们提供了一种方便的方法来集中管理重复性样式，从而提高代码的可维护性和可读性。

定义 CSS 变量

CSS 变量通过 `–` 前缀定义，并可以在 `:root` 选择器中全局定义，或者在特定选择器内定义。

:root {
    --main-bg-color: #2c3e50;
    --main-text-color: #ecf0f1;
}

使用 CSS 变量

使用 `var()` 函数可以在 CSS 中引用之前定义的变量。

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

案例讲解：使用 CSS 变量创建主题

我们将通过一个简单的示例来展示如何使用 CSS 变量来创建一个可以动态切换的主题。

:root {
    --theme-bg-color: #ffffff;
    --theme-text-color: #000000;
}

.dark-theme {
    --theme-bg-color: #2c3e50;
    --theme-text-color: #ecf0f1;
}

function switchTheme(theme) {
    document.documentElement.classList.toggle('dark-theme', theme === 'dark');
}

详细说明：

1. 在 `:root` 选择器中定义了两个 CSS 变量 `–theme-bg-color` 和 `–theme-text-color`，并指定了默认值。
2. 添加了一个 `.dark-theme` 类，该类重新定义了两个变量的值，以表示深色主题。
3. 使用 JavaScript 函数 `switchTheme` 来根据按钮点击事件切换 `:root` 元素上的 `.dark-theme` 类的添加或移除。
4. 样式化段落元素，使用了 `var(–theme-bg-color)` 和 `var(–theme-text-color)` 来引用这些变量。

总结

CSS 变量提供了一种强大的方式来集中管理和重用样式属性，从而简化了代码维护和提高了一致性。通过结合 JavaScript，我们可以创建动态和可交互的样式系统。