Переопределяющие переменные CSS

Переопределить глобальную переменную локальной переменной

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

Посмотрите на пример с предыдущей страницы:

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

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

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

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

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

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

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

CSS-функция var()