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>