CSS变量，也被称为“自定义属性”，是一种存储和重复使用值的方法，从而使你的CSS更加灵活和可维护。它们可以用于任何CSS属性的值，并且可以在文档的任何位置使用。
一、CSS变量的作用域
CSS变量的作用域是指它们在何处可用。在任何给定的元素或选择器内定义的变量只在该元素或选择器内有效。这称为局部作用域。一旦你超出了这个范围，你就不能访问这个变量。你可以在任何元素或选择器内定义和使用新的变量。
例如：
```cssdiv { --mai-color: #06c;}
p { color: var(--mai-color); / 这是有效的，因为 --mai-color 在 div 中定义 /}```在上述代码中，我们在`div`选择器内定义了一个名为 `--mai-color` 的变量，并在`p`选择器中使用它。这是有效的，因为 `--mai-color` 在 `div` 中定义，所以它在 `p` 中是可见的。
如果你尝试在没有任何前缀的样式表中全局使用这个变量，那么它就会失效：
```css--mai-color: #06c;
p { color: var(--mai-color); / 这会失效 /}```这是因为没有前缀的 CSS 变量是全局的，它们应该在所有的样式规则外部定义。一旦你进入了一个选择器块（例如在 `p` 中），你就进入了局部作用域，全局变量在这个作用域内就不再可见。这就是为什么在上面的例子中 `--mai-color` 在 `p` 中无效。
二、使用CSS变量的好处
使用CSS变量有很多好处。它们可以帮助你保持你的CSS更加干净和一致。你可以将颜色、字体堆栈和其他常用的值存储在一个地方，并在你的CSS中任何需要的地方使用它们。这使得全局更改（例如更改整个站点的主题颜色）变得更加容易。CSS变量也可以使代码更易于维护和理解，因为它们有一个明确和一致的命名约定。
