编辑“︁CSS变量作用域”︁

{{DISPLAYTITLE:CSS变量作用域}}

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

== 简介 ==
CSS变量（也称为自定义属性）通过`--`前缀定义，例如`--main-color: #3498db;`。变量的作用域决定了它在哪些选择器中可用。CSS变量的作用域遵循CSS的层叠规则，分为：
* '''全局作用域'''（Global Scope）：在`:root`伪类中定义的变量，可在整个文档中使用。
* '''局部作用域'''（Local Scope）：在特定选择器中定义的变量，仅在该选择器及其子元素中有效。

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

<syntaxhighlight lang="css">
:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
}

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

button {
    background-color: var(--secondary-color);
}
</syntaxhighlight>

'''输出效果：'''
* `body`的背景色为`#3498db`。
* `button`的背景色为`#2ecc71`。

== 局部作用域 ==
在特定选择器中定义的变量仅在该选择器及其后代中有效。

<syntaxhighlight lang="css">
.container {
    --container-padding: 20px;
    padding: var(--container-padding);
}

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

'''输出效果：'''
* `.container`的`padding`为`20px`。
* `.box`的`padding`为`10px`，因为它无法访问`--container-padding`。

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

<syntaxhighlight lang="css">
:root {
    --text-color: black;
}

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

p {
    color: var(--text-color);
}
</syntaxhighlight>

'''输出效果：'''
* 默认情况下，`p`的文字颜色为`black`。
* 如果`p`位于`.dark-mode`中，文字颜色变为`white`。

== 实际应用案例 ==
=== 主题切换 ===
CSS变量的作用域特性使其非常适合实现主题切换功能。

<syntaxhighlight lang="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);
}
</syntaxhighlight>

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

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

<syntaxhighlight lang="css">
.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);
}
</syntaxhighlight>

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

== 作用域的可视化 ==
<mermaid>
graph TD
    A[:root] -->|定义全局变量| B[所有元素]
    C[.container] -->|定义局部变量| D[.container及其子元素]
    E[.dark-mode] -->|覆盖全局变量| F[.dark-mode及其子元素]
</mermaid>

== 数学公式（可选） ==
CSS变量的计算可以表示为：
<math>
\text{var}(--name, \text{fallback}) = 
\begin{cases}
\text{value of } --name & \text{if } --name \text{ exists,} \\
\text{fallback} & \text{otherwise.}
\end{cases}
</math>

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

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

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS自定义属性]]