2022-11-23 CSS :root 使用变量

:root（结构性伪类选择器），将样式绑定到页面的根元素中，在该选择器中的样式是全局样式。

** 伪类选择器和伪元素选择器参考文章：https://blog.csdn.net/m0_51277853/article/details/124934686

在大型项目维护中，有多处css样式属性值是会重复的，比如字体颜色、背景颜色等等……如果每个样式都单独写一次，对于开发来说比较繁琐（不断cv..），后续如果要整体修改某个样式，工程量还是比较大的；另外一个是可读性并不高。

通常将会重复出现的样式声明在:root选择器中，:root中声明的样式是全局的，比如：:root {color: red}，就相当于 body {color: red}，使用时需要将:root所在的样式文件引入对应的文件，属性名以 '--'为前缀，称为变量，使用时可以用var()函数访问变量。
后续如有样式修改，只用改一个文件就OK了。
而且变量名一般会有特殊意义，这样代码可读性也好。

全局样式文件.jpg

.box {
    color: var(--analytic_font_color1);  // 引入样式文件，使用其中的变量
}