CSS-переменные, официально называемые пользовательскими свойствами, добавили в обычный CSS возможность, которая раньше была доступна только через препроцессоры вроде Sass — но, в отличие от препроцессорных переменных, работают они прямо в браузере и могут меняться динамически.
Объявляются такие переменные с двумя дефисами в начале имени, чаще всего внутри селектора root, что делает их доступными на всей странице целиком. Использовать значение переменной можно через функцию var, которая подставляет текущее значение в любое подходящее по типу CSS-свойство.
Главное отличие от переменных в Sass в том, что CSS-переменные живут прямо в браузере и могут меняться на лету через JavaScript или в ответ на изменение состояния через медиазапросы, тогда как значения в Sass фиксируются один раз навсегда ещё на этапе компиляции файла в обычный CSS.
Именно эта особенность делает CSS-переменные удобным инструментом для тёмной темы, для настраиваемых пользователем интерфейсов или для компонентов, чей внешний вид должен меняться в зависимости от контекста, например одна и та же кнопка в разном цвете в зависимости от раздела сайта.
Переменные можно переопределять локально внутри конкретного селектора, и тогда все свойства, использующие эту переменную внутри данного блока, подхватят новое, более узкое значение, не затрагивая остальную часть страницы, где действует более общее значение переменной.
На практике переменные обычно заводят для цветов, отступов, размеров шрифтов и точек перелома — всего того, что используется в нескольких местах проекта и что может понадобиться изменить централизованно, в одном месте, вместо поиска по всему файлу стилей.
Полное описание синтаксиса пользовательских свойств и примеры их динамического использования есть в статье про CSS-переменные на MDN.
