Bootstrap 4 - 在css中通过根名称引用颜色[重复]

Posted 2023-03-05

【中文标题】Bootstrap 4 - 在css中通过根名称引用颜色[重复]

【英文标题】：Bootstrap 4 - Reference a color by root name in css [duplicate]

【发布时间】：2019-03-02 03:51:00

【问题描述】：

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

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

为了更清楚，我希望能够做如下的事情：

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

这样，如果我将来更改模板，所有颜色将自动调整为新模板值，所有应用外观将与新的通用模板方面保持“和谐”。

我不确定这是否可以使用纯 css，但也许有一种解决方法。

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

有什么帮助/想法吗？

【问题讨论】：

您可以使用CSS variables 或CSS pre-processor

感谢您抽出宝贵时间@Quentin Veron。不知道 CSS 变量，这是完美的伎俩，虽然它并没有被所有浏览器完全支持，因为 Itay Gal 说我已经在三个主要浏览器中尝试过并且它有效，所以现在我会继续使用它像 Sass 一样简单。

【参考方案1】：

他们是CSS Variables。您可以像...一样引用它们。

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

https://codeply.com/go/vFE9n0VrGz

相关：CSS use color from another class?

【讨论】：

谢谢@Zim。正如我所说，我不了解 CSS 变量，这可以完美地解决问题，虽然 Itay Gal 所说的并非所有浏览器都完全支持它，但我已经在三个主要浏览器（包括移动浏览器）中尝试过它并且它有效所以现在我会继续使用它，因为它比 Sass 更简单，并且会将您的答案标记为正确。

除了在 IE 11 和 Opera 中得到广泛支持。

【参考方案2】：

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

:root 
  --success: #66CD00;


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

【讨论】：

谢谢@IJ D，你的答案和Zim一样，已经标记为正确了。

我想你只在不使用 scss 的时候使用这个？

【参考方案3】：

不完全支持 CSS 变量：

Can I use CSS variables?

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

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

【讨论】：

非常感谢@Itay Gal，您在技术上是正确的，您的答案应该被标记为正确，但我不了解 Sass，我正在寻找一个简单的解决方案，并且 CSS 变量在某些情况下有效主要浏览器（包括手机），所以现在我将使用该解决方案，直到我有时间深入研究 Sass。