css变量必须是--开头，用var()去使用。
html、:root 都代表根元素，在根元素写的css变量可全局进行使用。
html {
--primary-color: #008080;
--secondary-color: #00ff00;
--tertiary-color: #ff0000;
--quaternary-color: #0000ff;
--colorStyle: red;
--width: 100px;
--height: 100px;
...等等
}
// 或者
:root {
--primary-color: #008080;
--secondary-color: #00ff00;
--tertiary-color: #ff0000;
--quaternary-color: #0000ff;
--colorStyle: red;
--width: 100px;
--height: 100px;
...等等
}
如何全局和局部有相同的属性 以局部的为准，局部会覆盖全局
var(--height, 100px)第二个参数是默认值，当没有申明css变量时可设置一个默认值。
<style>
.text {
--colorStyle: pink;
--width: 30px;
--height: 30px;
color: var(--colorStyle);
width: var(--width);
height: var(--height);
/* height: var(--height, 100px); */
}
</style>
