伪类 :root

:root是一个伪类，表示文档根元素，所有主流浏览器均支持 :root [选择器]

定义一个颜色变量
定义变量前面需要加 --
:root {
  --box-color: red;
}

var()

var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。（这样做通常会产生无效的语法或者一个没有关联到变量的值。）

var() 定义的变量只能被自己或者自己的后代使用

div {
  width: 100px;
  height: 100px;
  background-color: var(--box-color);
}