Урок 44 из 53 · 8 мин

Переменные: --цвет и var()

Пользовательские свойства --x, var() с запасным значением, область видимости и @property.

Сорок раз

Хочу фирменный цвет потемнее. Это же быстро?
Бро
Он у нас в сорока местах. Заведём переменную --brand — и цвет будет меняться в одном месте.

Свойство

--имя

Что это: :root { --brand: #c8763a; } — свойство, которое придумал ты. Имя начинается с двух дефисов.
Зачем: Цвета, отступы, радиусы — в одном месте.

Функция

var()

Что это: color: var(--brand); запасное значение: var(--brand, orange).
Зачем: Использовать переменную где угодно.
Как: HTML
<style> :root { --brand: #7c3f1d; } button { background: var(--brand); color: white; border: 0; padding: 8px 12px; } .alt { --brand: #c8763a; } </style> <button>Обычная</button> <button class="alt">Переопределила --brand</button>
Так это выглядит

Понятие

Каскад переменных

Что это: Переопредели переменную в .dark или в карточке — изменятся все потомки.
Зачем: Темы и варианты компонентов без копирования правил.

@-правило

@property

Что это: @property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; } — браузер знает тип и может её анимировать.
Зачем: Анимированные градиенты.

Ваш ход

Задание

Заведи в :root переменную --brand: #7c3f1d и используй её у .order: background-color: var(--brand).

<style>
.order { background-color: #c8763a; color: white; }
</style>
<button class="order">Заказать</button>

<style>
.order { background-color: #c8763a; color: white; }
</style>
<button class="order">Заказать</button>

Результат обновляется при вводе

ПрактикаОбязательное задание

Выберите один ответ.

Что выведет color: var(--accent, tomato), если --accent не задана?

Домашнее заданиеДля закрепления

Введите короткий ответ без лишних пробелов.

С каких символов начинается имя CSS-переменной? Введи их.