css将色值定义变量

CSS将色值定义变量，可以方便我们在多处使用同一种颜色时，只需定义一次颜色值，便可在之后的代码中直接通过变量名调用。

:root {
  --primary-color: #007bff;
}

.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

在上面的代码中，我们在:root伪类中定义了一个名为--primary-color的变量，它的值是#007bff。我们随后在.btn-primary选择器中使用了该变量，作为背景色、边框色的值。

如果我们需要修改这个primary color，只需修改一处即可，而不用在整个代码中查找并替换所有用到该颜色的地方。

:root {
  --primary-color: #dc3545;
}

修改完后，所有使用该变量的地方都会立即生效，这样简单、便捷的操作方式，让我们在大型项目中，能更好地维护代码和管理样式。