css变量是啥？

CSS变量是一种用于存储和重复使用值的方法。它们可以在选择器中声明，并在整个样式表中使用。使用CSS变量可以提高代码的可维护性和可读性，也可以使样式表更加灵活

css变量的语法

在声明CSS变量时，需要使用双减号（–）作为前缀，后面跟着变量名和值。
例如：
  :root {  --color:#007bff; } 

在使用CSS变量时，需要使用var()函数来引用变量。
例如：
> .button {   
>		 background-color: var(--color);
>  		} 

这将会将按钮的背景颜色设置为先前声明的–primary-color变量的值。CSS变量还支持层叠和继承，可以在不同的选择器中声明相同的变量名，并在样式表中使用。

css变量的使用场景

CSS变量可以用于各种场景，例如： 1.主题切换 2.响应式设计2. 统一风格2.动态效果

主体切换

使用CSS变量可以轻松实现主题切换，只需要改变变量的值即可。

响应式设计

使用CSS变量可以在不同的屏幕大小和设备上轻松调整样式。

统一风格

使用CSS变量可以避免在整个样式表中重复使用相同的颜色、字体和其他样式，从而提高代码的可维护性和可读性。

动态效果

使用CSS变量可以实现动态效果，例如渐变、动画和过渡等。总之，CSS变量可以让样式表更加灵活和易于维护，从而提高网站的性能和用户体验。