CSS变量也被称为自定义属性或CSS属性，是一种可重用的元素，可以定义包含在CSS中的值，可以在文档的任何位置使用。

:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
}
h1 {
color: var(--primary-color);
}
button {
background-color: var(--secondary-color);
}

在上面的代码中，使用:root伪类定义了两个CSS变量。这些变量使用--前缀来声明，并可以在整个文档中使用。

这些变量可以在其他选择器中使用，以便在需要时轻松更改页面的外观和UI元素的颜色。

CSS变量可以用来存储维护和修改图像大小的值，字体颜色，边框等。

使用CSS变量还可以帮助提高代码维护性，减少制作样式表的时间，并且降低了可能出现的错误的风险。

总之，CSS变量在CSS开发中是一个非常重要的概念，可以使网站更容易维护并更加灵活。