Задать вопрос
Alexandroppolus
@Alexandroppolus
кодир

Как заставить css-variables перевычисляться?

Суть:
<body>
    <div class="parent"><div class="child"></div></div>
</body>


body {
  --color: green;
}

.parent {
  --bg: var(--color);
}

.child {
  --color: red;
  background-color: var(--bg);
}


https://codesandbox.io/p/sandbox/xjvd8p

Я переопределил --color в чилде, но значение --bg зафиксировалось в паренте и для чилда остается зеленым. В чилде надо красное. Понимаю, что так мир устроен, но можно ли как-то где-то что-то настроить или прописать (не глобально для всего проекта, а точечно)? Типа "позднее связывание" для переменных.
  • Вопрос задан
  • 130 просмотров
Подписаться 1 Простой Комментировать
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
CSS переменные в оригинале называются "пользовательские свойства" (custom properties). То есть по поведению это такие же свойства как и любые другие, вроде width, height и т.п. за исключением того, что они используются в качестве значений. Для них действуют те же правила наследования. и если --bg определен в родителе, и не переопределен в дочке, то будет использоваться значение из родителя.

Проще говоря, сделать то, что вы хотите - не получится. У меня как-то раз тоже возникало такое желание, но увы.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы