4

我不currentColor经常使用，但当我使用时，它非常有用。

所以我对CSS 变量的到来有点兴奋。

让我们看一个红绿灯。

NB请相信我，日本的交通信号灯会从红色变为琥珀色到蓝色。我知道这很难相信。我知道蓝光看起来有点绿。但它不是，它是蓝色的。

div {
float: left;
width: 200px;
}

div div {
float: none;
}

.top {
color: rgb(255,0,0);
}

.middle {
color: rgb(255,227,0);
}

.bottom {
color: rgb(63,255,63);
}

.jp .bottom {
color: rgb(0,255,191);
}

.light {
text-align: center;
}

.light::before {
content: '';
display: block;
margin: 6px auto 0;
width: 25px;
height: 25px;
border-radius: 15px;
background-color: currentColor;
}
<div class="uk">
<h2>UK Traffic Lights</h2>
<div class="top light">Red</div>
<div class="middle light">Amber</div>
<div class="bottom light">Green</div>
</div>

<div class="jp">
<h2>JP Traffic Lights</h2>
<div class="top light">Red</div>
<div class="middle light">Amber</div>
<div class="bottom light">Blue</div>
</div>

现在，关于聪明的事情

background-color: currentColor;

是它只是读取当前值color并使用它。

相比之下...

background-color: var(--current-color);

那不能引用另一个样式声明的当前值，可以吗？

因此，您需要设置 4 个变量（就像您需要color:在上面的样式中声明 4 次一样）：

.top {
--color-top: rgb(255,0,0);
}

.middle {
--color-middle: rgb(255,227,0);
}

.bottom {
--color-bottom: rgb(63,255,63);
}

.jp .bottom {
--color-bottom-jp: rgb(0,255,191);
}

然后......您需要稍后引用每个不同的变量。这意味着background-color每个变量都有不同的声明：

.top::before {
color: var(--color-top);
background-color: var(--color-top);
}

.middle::before {
color: var(--color-middle);
background-color: var(--color-middle);
}

.bottom::before {
color: var(--color-bottom);
background-color: var(--color-bottom);
}

.jp .bottom::before {
color: var(--color-bottom-jp);
background-color: var(--color-bottom-jp);
}

真的？！

这不可能。我错过了什么吗？

有没有办法currentColor重现var(--current-color)？

CSS 变量有没有办法表示另一个样式声明的当前值？

4

2 回答 2

5

实际上，您可以设置一个 CSS 自定义属性，而不是直接设置该color属性，并将其用于color和background-color。

/* Set global variable inside the :root scop */
:root {
  --color-top: rgb(255,0,0);
}

div {
  float: left;
  width: 200px;
}

div div {
  float: none;
}

/* Set the local --color variable, according to your need */
.top {
  --color: var(--color-top);
}

.middle {
  --color: rgb(255,227,0);
}

.bottom {
  --color: rgb(63,255,63);
}

.jp .bottom {
 --color: rgb(0,255,191);
}

.light {
  color: var(--color);
  text-align: center;
}

.light::before {
  content: '';
  display: block;
  margin: 6px auto 0;
  width: 45px;
  height: 45px;
  border-radius: 15px;
  background-color: var(--color);
}
<div class="uk">
<h2>UK Traffic Lights</h2>
<div class="top light">Red</div>
<div class="middle light">Amber</div>
<div class="bottom light">Green</div>
</div>

<div class="jp">
<h2>JP Traffic Lights</h2>
<div class="top light">Red</div>
<div class="middle light">Amber</div>
<div class="bottom light">Blue</div>
</div>

我真的不明白您为什么不使用background-color: currentColor，因为它在您自己的示例中运行良好。

于 2016-07-15T11:52:09.957 回答
1

如果您使用的是 SASS（编译成 css），那么您可以使用 SASS 变量。代码将如下所示：

$font-stack:    Helvetica;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

更多信息请访问 SASS 官网

于 2016-07-15T11:46:52.230 回答