​CSS переменные.

CSS-переменные — это значения, которые объявляют в CSS, преследуя две цели. Первая — это многократное использование таких значений. Вторая — это сокращение объёмов CSS-кода.

Рассмотрим простой пример.
.section { border: 2px solid #235ad1; } .section-title { color: #235ad1; } .section-title::before { background-color: #235ad1; } В этом примере #235ad1 используется три раза. Представьте себе, что это — часть большого проекта. В нём подобные стили разбросаны по множеству CSS-файлов. Вас попросили поменять цвет #235ad1. В такой ситуации лучшее, что можно сделать, заключается в том, чтобы прибегнуть к возможностям редакторов кода по поиску и замене строковых значений.

Но при использовании CSS-переменных подобные задачи решаются гораздо проще.

 :root {
   --color-primary: #235ad1;
 }
 .section {
   border: 2px solid var(--color-primary);
 }
 .section-title {
   color: var(--color-primary);
 }
 .section-title::before {
   background-color: var(--color-primary);
 }

Этот фрагмент кода выглядит гораздо чище, чем предыдущий. Переменная –color-primary является глобальной, так как объявлена она в стиле для псевдокласса :root.