CSS变量可以访问 DOM，可以创建具有局部或全局范围的变量，使用 JavaScript 和媒体查询来修改变量。 var() 函数用于插入 CSS 变量的值。 全局变量可以在整个文档进行访问使用，局部变量只能在声明它的选择器内部使用。

:root声明的是全局变量，如果是一个自定义属性用--作为前缀，使用时比如: var(--color-primary)就和#2568f3相等

:root { --color-primary: #2568f3; } .title{ background-color: var(--color-primary); }

使用CSS变量的好处：

1.可维护性

如果没有CSS变量需要手动改变大量的属性值，使用批量处理查找和替换，可能会影响其他样式规则。使用CSS变量只用改变定义时的值。

2.提高CSS可读性

可以通过变量名判断属性内容

使用CSS变量要注意大小写敏感，不要把长度的变量用于颜色属性等。