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

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变量.你可以像......那样引用它们

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