在 CSS 中，我们可以使用自定义属性（也称为 CSS 变量）来存储特定的值，以便在整个文档中重复使用。这可以帮助我们减少重复代码，提高代码的可维护性和可读性。

以下是 CSS 变量的一些基本使用方法：

1. 定义变量

在 CSS 中，我们可以使用 `--` 符号来定义一个自定义属性。这个属性可以赋予任何值。例如：

```css:roo { --mai-color: #06c;}```在这个例子中，我们在 `:roo` 伪类上定义了一个名为 `--mai-color` 的变量，并将其值设置为 `#06c`。

2. 使用变量

定义好变量后，我们就可以在 CSS 中使用这个变量了。使用时，我们只需在变量名前面加上 `var()` 函数，并将变量名放在括号中即可。例如：

```cssdiv { backgroud-color: var(--mai-color);}```在这个例子中，我们将 `div` 元素的背景颜色设置为 `--mai-color` 变量的值，也就是 `#06c`。

3. 动态修改变量值

如果我们需要动态修改 CSS 变量的值，可以使用 `calc()` 函数。例如：

```css:roo { --mai-color: #06c;}

div { backgroud-color: calc(var(--mai-color) 10%);}```在这个例子中，我们将 `div` 元素的背景颜色设置为 `--mai-color` 变量的值加上 10%。注意，`calc()` 函数可以用于任何接受长度或百分比值的 CSS 属性。

使用 CSS 变量可以让我们更方便地管理和维护 CSS 代码。通过定义和使用变量，我们可以减少代码的重复，提高代码的可读性和可维护性。同时，动态修改变量的值也可以让我们更灵活地控制 CSS 的样式。