CSS变量作用域

CSS变量作用域（CSS Variable Scope）是CSS自定义属性（Custom Properties）的核心概念之一，它决定了变量在何处可以被访问和使用。理解作用域对于有效管理CSS变量至关重要，尤其是在大型项目中。

简介

CSS变量（也称为自定义属性）通过`--`前缀定义，例如`--main-color: #3498db;`。变量的作用域决定了它在哪些选择器中可用。CSS变量的作用域遵循CSS的层叠规则，分为：

• 全局作用域（Global Scope）：在`:root`伪类中定义的变量，可在整个文档中使用。
• 局部作用域（Local Scope）：在特定选择器中定义的变量，仅在该选择器及其子元素中有效。

全局作用域

在`:root`中定义的变量是全局的，可以被文档中的任何元素访问。

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
}

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

button {
    background-color: var(--secondary-color);
}

输出效果：

• `body`的背景色为`#3498db`。
• `button`的背景色为`#2ecc71`。

局部作用域

在特定选择器中定义的变量仅在该选择器及其后代中有效。

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

.box {
    /* 这里无法访问 --container-padding */
    padding: 10px;
}

输出效果：

• `.container`的`padding`为`20px`。
• `.box`的`padding`为`10px`，因为它无法访问`--container-padding`。

作用域覆盖

局部变量可以覆盖全局变量，遵循CSS的层叠规则。

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

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

p {
    color: var(--text-color);
}

输出效果：

• 默认情况下，`p`的文字颜色为`black`。
• 如果`p`位于`.dark-mode`中，文字颜色变为`white`。

实际应用案例

主题切换

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);
}

通过切换`dark-theme`类，可以动态改变页面的背景色和文字颜色。

组件样式隔离

在组件化开发中，局部作用域可以确保样式不会泄漏到其他组件。

.card {
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    box-shadow: var(--card-shadow);
}

.modal {
    --card-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

`--card-shadow`在`.card`和`.modal`中有不同的值，互不影响。

作用域的可视化

graph TD A[:root] -->|定义全局变量| B[所有元素] C[.container] -->|定义局部变量| D[.container及其子元素] E[.dark-mode] -->|覆盖全局变量| F[.dark-mode及其子元素]

数学公式（可选）

CSS变量的计算可以表示为： $\text{var}(--name,\text{fallback})=\{\begin{array}{ll}\text{value of }--name& \text{if }--name\text{ exists,}\\ \text{fallback}& \text{otherwise.}\end{array}$

总结

• 全局变量在`:root`中定义，整个文档可用。
• 局部变量在特定选择器中定义，仅在该选择器及其子元素中有效。
• 局部变量可以覆盖全局变量。
• 作用域特性适用于主题切换、组件隔离等场景。

通过合理利用CSS变量的作用域，可以编写出更模块化、可维护的样式代码。