4

私はcurrentColorあまり頻繁に使用しませんが、使用するときは非常に便利です。

だから私は、CSS 変数の登場に少し興奮していました。

信号機を取りましょう。

注:日本の信号機は赤→オレンジ→青と変化しますので、ご安心ください。私は信じがたいことを知っています。青い光が緑に見えるのは知っています。しかし、そうではありません、それは青いです。

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