使用纯的css如何定义变量？请举例说明

在CSS中，你可以使用CSS自定义属性（也称为CSS变量）来存储和重复使用值。这些变量使你可以更轻松地维护和更新你的样式表，因为它们允许你在一个地方更改值，并在整个样式表中自动应用这些更改。

以下是如何在CSS中定义和使用变量的示例：

/* 定义一个变量 */
:root {
  --main-color: #06c;
}

/* 使用变量 */
body {
  background-color: var(--main-color);
}

h1 {
  color: var(--main-color);
}

在这个示例中，:root伪类用于定义变量--main-color，并设置其值为#06c。然后，在body和h1选择器中，我们使用var(--main-color)来引用并使用这个变量的值。

这样，如果你决定更改主要颜色，你只需在:root伪类中更新--main-color的值，而无需在整个样式表中搜索和替换颜色值。这大大提高了样式的可维护性和灵活性。