CSS变量是CSS3中提供的全新特性，它使得我们可以将一个变量值与一个CSS属性关联起来。CSS变量保存的值可以在整个CSS文件中使用，并且可以动态地改变它们的值，而无需更改每个单独的选择器或属性。 CSS变量使用双减号（--）定义，并通过var()函数进行引用。定义CSS变量时，需要在任意一个选择器中使用包含双减号的属性（例如：--my-color: red;）。在此后，可以使用var()函数在另一个CSS属性中引用该值（例如：color: var(--my-color);）。 下面是一个简单的例子，演示了如何创建并使用CSS变量：

p{
--background-color: yellow;
background-color: var(--background-color);
color: black;
padding: 10px;
}

上面的CSS中，我们使用了自定义的CSS变量 --background-color，并将其值设置为 yellow。然后，我们使用 var() 函数引用了这个变量，并将其应用到了 background-color 属性中。 需要注意的是，CSS变量可以在其他变量中使用，这样可以创建复杂的值和结构。 在使用CSS变量时，同样需要注意兼容性问题。CSS变量在某些浏览器版本中可能无法正常工作，需要经过兼容性调试才能保证所有浏览器中运行良好。 总的来说，CSS变量是CSS3中非常有用的新增特性。可以有效地提高代码可重用性和可维护性，同时也可以让开发人员更加灵活地控制整个网站的外观和样式。