Переменные CSS не переопределяются родителями ⇐ CSS

[Anonymous]

Я пытаюсь позволить родительской обертке переопределить переменную CSS в компоненте. Когда я делаю следующий, он не работает: < /p>
родитель: < /p>



.Wrapper {
--component-name-padding: 0;
}
< /code>
Мой ребенок CSS: < /p>
.Component {
--component-name-padding: var(--spacing-8);
padding: --component-name-padding;
}
< /code>
Я ожидал, что значение-Component-name-padding: 0 внутри моего. Но я также попробовал ниже, и это сработало, и я мог переопределить прокладку. Что я изменил: < /p>
.Component {
padding: var(--component-name-padding, var(--spacing-8));
}
< /code>
Я понимаю, что для второй опции, если родитель не будет предоставлена, это будет дефолт на VAR (-между интервалом-8). Но почему первый вариант, который я написал, не работал. Это потому, что этот подход объявляет переменную локально и всегда будет иметь приоритет, даже если родитель пытается ее изменить? Любые ресурсы, которые можно прочитать больше, очень приветствуются!

Подробнее здесь: https://stackoverflow.com/questions/796 ... -by-parent