Есть ли способ воспроизвести currentColor с var (- текущий цвет)?

Question

Я не часто использую 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 переменных (так же, как вам нужно объявить 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 для текущего значения другой декларации стиля?

Answer 1

На самом деле, вы может установить пользовательское свойство 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, потому что он хорошо работает в вашем собственном примере.

Answer 2

Ни в коем случае с помощью CSS, но вы можете использовать SASS, что наделенный полномочиями CSS (затем компилируется в CSS), и она будет выглядеть следующим образом:

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

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

больше информаций на SASS official website