Справочник HTML & CSS

var()

Подставляет значение пользовательского свойства (переменной CSS).

Синтаксис

var(--name, fallback)

Параметры

Параметр	Тип	Описание
--name	custom property	Имя пользовательского свойства, начинается с двух дефисов.
fallback	any	Значение на случай, если свойство не задано.

Примеры

Переменные объявлены в :root и переопределены для одного класса:

<style>
  :root { --brand: seagreen; --radius: 8px; }
  .btn { background: var(--brand); color: white; border: 0; padding: 8px 16px; border-radius: var(--radius); }
  .btn.danger { --brand: crimson; }
</style>
 
<button class="btn">Save</button>
<button class="btn danger">Delete</button>

Запасное значение:

<p style="color: var(--not-defined, gray);">The variable is not defined, so the fallback gray is used.</p>

Примечания

Пользовательские свойства наследуются, и их можно переопределить для любой части страницы, — так делают темы и варианты компонентов. Имена чувствительны к регистру: --Brand и --brand — разные.

См. также

:root — Срабатывает у корневого элемента документа — на веб-странице это `<html>`.
calc() — Вычисляет значение из выражения — даже в разных единицах.
@property — Регистрирует пользовательское свойство с типом, чтобы браузер мог его анимировать и проверять значение.

Вопросы и ответы по теме

В учебнике

CSS-переменные — Пользовательские свойства — как объявить переменную, прочитать её через var(), переопределить и задать запасное значение.

Спасибо, что читаете!