Question

我正在使用一个不错的Bootstrap 4 css主题，该主题用非常漂亮的颜色覆盖了默认的主题，但是我无法通过css的根名称来“引用”颜色。

让我们更好地解释一下，Bootstrap具有一些根色，它们的名称分别是“成功”，“危险”，“深色”，“浅色”等（以及自定义主题css模板），并且-当然，它们有一个十六进制表示形式，我想将这种颜色中的一种应用于链接悬停，用其根名而不是其十六进制代码来调用它。

更清楚地说，我希望能够做类似下一个的事情：

.dropdown-menu > a:hover {
  color: success; /*or dark or danger or whatever */
}

这样，如果将来我要更改模板，则所有颜色都会自动调整为新的模板值，并且所有应用程序的外观都将与新的常规模板外观保持“和谐”。

我不确定使用纯CSS可以做到这一点，但也许有解决方法。

如您所见，我的目标是能够拥有尽可能多的颜色（按名称动态引用，而不是静态使用十六进制），因此，如果我更改bootstrap css模板，则所有颜色都会自动调整为新的模板值

有什么帮助/想法吗？

Answer 1

它们是CSS Variables。您可以引用它们，就像...

.dropdown-menu > a:hover {
  color: var(--success);
}

Answer 2

您可以在代码中更早地设置它，并按如下所示调用它

:root {
  --success: #66CD00;
}

.dropdown-menu > a:hover {
  background-color: var(--success);
}

Answer 3

不完全支持CSS变量：

例如，您可以使用Sass或Less，在编码时定义变量，然后将其编译为所有浏览器都支持的简单CSS。

注意：Bootstrap 4是使用Sass（.scss文件）编写的