决定元素的颜色变体

使用CSS中的变量，可以在不同的情况下更改元素的颜色。

示例：

CSS代码：

:root { --primary-color: blue; --secondary-color: green; }

.element { background-color: var(--primary-color); }

@media (min-width: 768px) { .element { background-color: var(--secondary-color); } }

在上面的示例中，我们定义了两个CSS变量，即主要颜色和次要颜色。当页面宽度大于等于768px时，元素的背景颜色将为次要颜色。反之，背景颜色为主要颜色。通过使用CSS变量，我们可以轻松地更改元素的颜色变体，而不必更改每个元素的CSS样式。