CSS变量是CSS中的一种机制，可以定义一些可以重复使用的值，使得在整个文档中的样式都可以使用这些变量，从而简化了样式的管理和维护。
在CSS中，变量是通过“–”前缀定义的，可以在选择器中使用var()函数引用。变量可以定义在根元素（:root），也可以定义在其他元素上。
以下是一个CSS变量的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
:root {
--primary-color: #007bff;
}
h1 {
color: var(--primary-color);
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>在这个示例中，我们定义了一个名为“–primary-color”的变量，并将其设置为蓝色。然后在h1元素的样式中使用了这个变量，这样就可以使用这个变量来控制整个文档的主要颜色。
通过使用CSS变量，我们可以在整个文档中轻松地更改颜色和其他样式，而无需在每个元素的样式中重复定义这些值。
正文完