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

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

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

В :root селекторе media query измените его так, чтобы --penguin-size переопределся с новым значением 200px. Кроме того, переопределите --penguin-skin и задайте ему значение black. Затем измените размер предварительного просмотра, чтобы увидеть это изменение в действии.

Когда вы создаете переменные в :root они задают значение этой переменной для всей страницы. Вы можете переписать эти переменные, установив их снова в пределах определенного элемента.

Измените значение --penguin-belly на white в классе penguin .

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

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