CSS变量是一种在整个CSS中重复使用的值的占位符。使用CSS变量可以使整个样式表更加灵活和易于维护。

:root {
--main-color: #ff0000;
--secondary-color: #00ff00;
}
p {
color: var(--main-color);
border: 1px solid var(--secondary-color);
}

在这个例子中，我们定义了两个CSS变量，--main-color和--secondary-color。我们可以在整个样式表中使用它们。在这个例子中，我们在p标签中使用了它们。p标签的文本颜色将使用--main-color变量的值，而边框颜色将使用--secondary-color变量的值。如果我们想更改这些颜色，我们只需要更改--main-color和--secondary-color的值，而不是每个使用这些颜色的元素的值。

另一个好处是，CSS变量可以动态更改。我们可以使用JavaScript来更改它们的值。

document.documentElement.style.setProperty('--main-color', '#0000ff');

在这个例子中，我们使用JavaScript更改了--main-color的值为#0000ff。这个值将在整个样式表中使用，而不仅仅是在给定元素上。这意味着我们可以在整个网站中更改颜色主题，只需更改CSS变量的值。