CSS中如何自定义变量？
只需在变量名前添加两个“破折号”并为其赋值就可以了，例如: --penguin-color:black;
CSS中如何引用自定义变量？
background: var(–penguin-color);
要注意添加变量回退值，在变量值不生效的时候会使用该值，例如: background: var(–penguin-color:black, gray)，其中 gray 就是回退值。
:root 选择器，就像 html 是 body 的容器一样，你也可以认为 :root 元素是你整个 HTML 文档的容器，我们一般可以把自定义变量写到这里面，这样整个页面就都可以使用该变量了。当然，如果在某个元素里创建了相同的变量且赋值不同，则会覆盖重写该元素以及其子级内引用这个变量的值，不会影响 :root 里的初始值（层叠继承）。