使用CSS变量来设置CSS样式可以大大简化样式代码，提高代码可维护性。下面是一个完整的示例：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
}
.box {
background-color: var(--primary-color);
color: var(--secondary-color);
padding: 20px;
}
</style>
</head>
<body>
<div class="box">
<p>Hello, World!</p>
</div>
</body>
</html>在这个例子中，:root选择器表示文档的根元素，可以在其中定义全局的CSS变量。在这个例子中，定义了两个变量：--primary-color和--secondary-color。然后，在.box选择器中，我们使用了这些变量来设置背景色和文本颜色。
当需要更改主色调和副色调时，只需要改变定义变量的值，而不必在样式中搜索和替换颜色值。这样，代码就变得更加简洁和易于维护。
正文完