设置变量 变量名大小写敏感，--header-color和--Header-Color是两个不同变量。

vue中不能把root放在带scope样式里 否则无效

:root{
  --main-color: #4d4e53;
  --main-bg: rgb(255, 255, 255);
  --logo-border-color: rebeccapurple;
  --header-height: 68px;
  --content-padding: 10px 20px;
  --base-line-height: 1.428571429;
  --transition-duration: .35s;
  --external-link: "external link";
  --margin-top: calc(2vh + 20px);
}

读取变量。

a {
  color: var(--foo);
  text-decoration-color: var(--bar);
}

var的第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

color: var(--foo, #7F583F);

如果变量值是数值，不能与数值单位直接连用。必须使用calc()计算函数，将它们连接。

.foo {
  --gap: 20;
  /* 无效 */
  margin-top: var(--gap)px;
有效
  margin-top: calc(var(--gap) * 1px);
}

对于不支持 CSS 变量的浏览器，可以采用下面的写法。

a {
  color: #7F583F;
  color: var(--primary);
}