Question

我希望浏览器自动将color: red呈现为color: #DB0000。我不想在应用程序中将“red”的样式设置为color: red，而是使用与系统定义的red定义不同的颜色。我们的应用程序使用与标准设置不同的“红色”颜色来设置css中的color: red样式。除了创建一个类并使用我需要设置样式的类（我担心开发人员可能忘记使用这个类而不是设置color: red），有没有办法自动覆盖{的定义颜色{1}}并使用我自己的color: red设置覆盖它？

Answer 1

不，在纯CSS中没有这样的可能性。

但是，在SASS和LESS（两个CSS预处理器）中，您可以定义变量。因此，您可以将@red1: #DB0000定义为变量，然后在任意数量的CSS规则中使用color: @red1或border-color: @red1。

Answer 2

~~使用CSS是不可能的，但是如果你使用SASS，你可以创建一个宏来改变颜色，虽然这仍然可能不起作用。~~

编辑： 在我自己进行一些洞察之后，是一种在纯CSS中使用变量的方式（没有SASS！）：

:root {
    --red: #DB0000; /* Define your custom value */
}

p {
    color: var(--red); /* Reference your custom value.
                         All <p> elements will be given
                         a text color of #DB0000 */
}

查看此CodePen

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

有没有办法在CSS中覆盖系统定义的颜色值？

2 个答案: