Каскадные переменные CSS
Когда вы создаете переменную, она становится доступной для использования внутри элемента, в котором вы его создаете. Он также становится доступным внутри любых элементов, вложенных в него. Этот эффект известен как каскадный . Из-за каскадирования переменные CSS часто определяются в корневом элементе. :root - это селектор псевдокласса , который соответствует корневому элементу документа, обычно html элемент. Создав переменные в :root , они будут доступны по всему документу и могут быть доступны из любого другого селектора позже в таблице стилей.
Определите переменную с именем --penguin-belly в селекторе :root и придайте ей значение pink . Затем вы можете увидеть, как значение будет применено каскадно вниз, чтобы изменить значение на розовый, где бы ни была эта переменная.