有没有办法用 var(--current-color) 重现 currentColor?
Is there a way to reproduce currentColor with var(--current-color)?
我不经常使用 currentColor
,但当我使用时,它非常有用。
所以我对 CSS 变量.
的到来感到有点兴奋
让我们走红绿灯。
N.B. 请相信我,日本交通信号灯 会从红色变为琥珀色再变为蓝色。我知道这很难相信。 我知道蓝灯看起来有点绿。但它不是,它是蓝色的。
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 个变量(就像您需要在上面的样式中声明 4 次 color:
):
.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);
}
真的吗?!
这不对。我错过了什么吗?
没有办法用 var(--current-color)
重现 currentColor
吗?
难道CSS变量没有办法表示另一个样式声明的当前值吗?
如果你正在使用SASS(编译成css),那么你可以使用SASS变量。代码将如下所示:
$font-stack: Helvetica;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
的更多信息
实际上,您可以设置一个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
,因为它在你自己的示例中运行良好。
我不经常使用 currentColor
,但当我使用时,它非常有用。
所以我对 CSS 变量.
的到来感到有点兴奋让我们走红绿灯。
N.B. 请相信我,日本交通信号灯 会从红色变为琥珀色再变为蓝色。我知道这很难相信。 我知道蓝灯看起来有点绿。但它不是,它是蓝色的。
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 个变量(就像您需要在上面的样式中声明 4 次 color:
):
.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);
}
真的吗?!
这不对。我错过了什么吗?
没有办法用 var(--current-color)
重现 currentColor
吗?
难道CSS变量没有办法表示另一个样式声明的当前值吗?
如果你正在使用SASS(编译成css),那么你可以使用SASS变量。代码将如下所示:
$font-stack: Helvetica;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
的更多信息
实际上,您可以设置一个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
,因为它在你自己的示例中运行良好。