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

Question

[zrim]

Ситуация следующая. Есть 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;
}

Answer 1

[Андрей Федоров]

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

Comments

[zrim]

я в курсе про этот вариант, но это дублирование лишнего кода. при большом количестве классов и различных сочетаниях переменных идет сильное его утяжеление. хотелось бы узнать почему тот вариант который я показал не работает. не нашел ничего в официальной документации.

Answer 2

[zrim]

вопрос решил. решение тут https://codepen.io/simai/pen/GRmjPrK