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`中有不同的值，互不影响。

作用域的可视化[编辑 | 编辑源代码]

数学公式（可选）[编辑 | 编辑源代码]

CSS变量的计算可以表示为： $var (- - n a m e, fallback) = {\begin{cases} value of - - n a m e & if - - n a m e exists, \\ fallback & otherwise. \end{cases}$

总结[编辑 | 编辑源代码]

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

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