CSS Переопределение переменных

Замена глобальных переменных локальными переменными

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

Взгляните на пример с предыдущей страницы:

Иногда необходимо, чтобы переменные изменялись только в определенном разделе страницы.

Предположим, нам нужен другой синий цвет для элементов button (кнопок). Затем мы можем повторно объявить переменную --blue внутри селектора button. Когда мы используем var(--blue) внутри этого селектора, он будет использовать объявленное здесь значение локальной переменной --blue.

Мы видим, что локальная переменная --blue переопределяет глобальную переменную --blue для элементов button:

Добавить новую локальную переменную

Если переменная должна использоваться только в одном месте, мы также могли бы объявить новую локальную переменную, например:

Поддержка браузерами

Числа в таблице указывают первую версию браузера, которая полностью поддерживает функцию var().

CSS Функция var()