Как использовать CSS-переменные только тогда, когда они существуют? - PullRequest
Новая
       10

Как использовать CSS-переменные только тогда, когда они существуют?

3 голосов
/ 17 апреля 2019

У меня есть немного CSS, где я хочу цвет по умолчанию, а затем переопределить его с помощью переменной. Когда CSS-переменная не существует, я хочу использовать запасной цвет. 

:root {
    /*--tintColor: red;*/
}

.text {
    color: blue;
    color: var(--tintColor);
}

Когда переменная не установлена, например, если она закомментирована, цвет становится черным. Я хочу, чтобы в этом случае цвет возвращался к синему, когда переменная не определена. Возможно ли это?

1 Ответ

2 голосов
/ 17 апреля 2019

Вы можете указать свойство fallback, например var(--tintColor, blue) - см. Демонстрацию ниже: 

.text {
    color: blue;
    color: var(--tintColor, blue);
}
<div class="text">some text here</div>
<div class="text" style="--tintColor: red">some text here</div>
...