Что такое CSS custom properties (переменные)?

Question

Accepted Answer

## Суть

Custom properties — переменные каскада: объявляются как `--name`, читаются через `var(--name, fallback)`.

```css
:root {
  --space: 8px;
  --brand: #0b6;
}
.button {
  padding: calc(var(--space) * 2);
  background: var(--brand);
}
.theme-dark { --brand: #3d9; } /* переопределение по scope */
```

Наследуются, живые при изменении (в отличие от переменных препроцессора), работают в runtime и с JS: `element.style.setProperty`.

## Ограничения

Не всё валидно внутри `var` без `calc`. Fallback важен. Имена обычно кладут на `:root` или компонент-хост.

## Итог

CSS-переменные — токены темы и динамика без пересборки; препроцессорные `$var` — compile-time.