CSS自定义变量的实现方法
CSS自定义变量（也称为CSS变量）是一种允许你存储和重用值的方法，从而减少重复代码。要定义一个自定义变量，只需使用`--`前缀，然后是变量名和可选的初始值。例如：`--main-color: #ff0000;`。要在样式中使用这个变量，只需在属性值中引用它，如：`color: var(--main-color);`。此外，还可以使用`:root`伪类将变量应用于整个文档，或者使用`var()`函数为元素设置不同的值。CSS变量可以用于颜色、字体、间距等任何可以设置为数值的属性。它们使CSS更具可维护性和灵活性。
今天找模板看到一个模板这段代码，很好奇，研究了下，分享给大家学习。
:root{--blue:#0e0620;--white:#fff;--green:#2ccf6d;}body{color:var(--blue);}这段是CSS3的自定义变量的写法，搞了前端这么多年，还没遇到过，以前只知道less SASS支持变量，没想到CSS都可以直接使用CSS变量了。
方法很简单，跟JS一样，先声明一个变量。
:root{--blue:#0e0620;}然后下面的代码中可以重复使用
body{color:var(--blue);}这种样式可以用在批量换模板风格颜色非常方便，只要改一个地方全部都改了。
相关专题
