@zrim

Наследование CSS переменных. Как сделать правильно?

Ситуация следующая. Есть CSS переменная А которая задает цвет. Эта переменная используется для другой переменной (Б), которая в свою очередь используется для установки цвета фона. Если для вложенного элемента изменить цвет переменной А, и указать что цвет фона элемента равен переменной Б, то цвет фона не меняется. Как сделать чтобы это работало. Не спрашивайте зачем такие изыски - это сильно упрощенная схема рабочей системы.

Демонстрацию проблемы можно посмотреть здесь

HTML
<div class="test-block bg-color">
  В этом пряугольнике должне быть красный цвет фона.
</div>


CSS
:root{
  --sf-color: #DBEDFF;
  --sf-test: var(--sf-color);
  background-color: var(--sf-test);
}

.bg-color{
  --sf-color: #FDAEB7;
  background-color: var(--sf-test);
}

.test-block{
  width: 100%;
  height: 50vh;
  border: 2px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
  • Вопрос задан
  • 47 просмотров
Пригласить эксперта
Ответы на вопрос 2
aliencash
@aliencash
Партизан
.bg-color{
  --sf-color: #FDAEB7;
  --sf-test: var(--sf-color);
  background-color: var(--sf-test);
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы