Bootstrap 4 - 在 css 中按根名称引用颜色

Question

我正在使用一个不错的 Bootstrap 4 css 主题，它用非常漂亮的颜色覆盖默认主题，但我无法 "reference" 通过其根名称的颜色来自 css.

让我们更好地解释一下，Bootstrap 有一些根颜色，名称是 "success"、"danger"、"dark"、"light" 等等（等等自定义主题 css 模板），并且 - 当然 - 它们具有十六进制表示，我想将其中一种颜色应用于 link 悬停通过其根名称而不是十六进制调用它代码。

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

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

这样，如果我以后更改模板，所有颜色都会自动调整为新的模板值，并且所有应用的外观都将保持 "harmony" 新的通用模板外观。

我不确定使用纯 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 or Less举例，在编码的时候定义变量，然后编译成一个简单的css，所有浏览器都支持。

注：Bootstrap4 是使用Sass（.scss 文件）编写的

Bootstrap 4 - Reference a color by root name in css