CSS基础——使用CSS变量

当我们在开发较大的CSS文件时，会遇到使用重复变量的情况，此时可以使用 CSS变量 来简化开发，具体看代码示例。

用法

// 声明css变量
element {
  --main-bg-color: brown;
}

// 使用css变量
element {
  background-color: var(--main-bg-color);
}

demo

这里使用 MDN 的例子进行说明

.one {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 100px;
}

.five {
  background-color: brown;
}

我们可以看到上述代码中都重复用到了 background-color， 并且对应的值都相同，此时就可以用css变量来简化开发。

:root {
  --main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 100px;
}

.five {
  background-color: var(--main-bg-color);
}

可以看到我们使用 :boot 来定义全局变量： :boot 一般可以认为是 html ，因为css变量有作用范围与继承性，即在 element1 中定义的css变量只能用于 element1 及其子类的css规则中，所以我们奖css变量定义在 :boot 中，就可以在全文应用css变量，这也是我们的一般用法。

参考

Using CSS custom properties (variables)