Как воспользоваться переменной в CSS?

CSS-переменную используют через функцию `var()`, указав имя и при желании запасное значение.

:root {
  --color-primary: #0066ff;
  --space: 8px;
}

.button {
  background: var(--color-primary);
  padding: var(--space) calc(var(--space) * 2);
  border-color: var(--color-border, #ccc); /* запасное значение */
}

Особенности

• Значение наследуется: переменная, объявленная у родителя, доступна всем потомкам.
• Можно переопределить для части страницы:

.card--dark { --color-primary: #4d94ff; }

• В calc() с переменными работают обычные вычисления.
• Изменить из JavaScript: document.documentElement.style.setProperty('--space', '12px').

Частые ошибки

• забыть два дефиса в имени;
• использовать var() в медиазапросе — так нельзя;
• ожидать, что --size: 10 + px склеится: нужно calc(var(--size) * 1px).

Коротко для собеседования

Объявляют --name: value, используют var(--name, запасное); переменные наследуются и меняются из CSS и JS.

Подробнее: MDN — var()