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

Насколько удобно будет изменить все значения, если захочется изменить базовый цвет? Правильно — придётся находить все значения внутри файла и заменять их на новые.

Долгое время это было одной из главных проблем CSS. С появлением стандарта CSS3 эта проблема ушла благодаря переменным.

Переменные в программировании — небольшой участок памяти, в котором мы храним нужное значение. К этому значению всегда можно обратиться из любого доступного места.

Как и в программировании, в CSS можно указать переменные, которые будут доступны в течение всего процесса разработки сайта. Если используются переменные, то можно быстро заменить одни значения на другие, вместо того, чтобы заменять значения свойств вручную.

Переменная создаётся с помощью конструкции --имя-переменной. Имя переменной вы можете выбрать сами. Для примера создадим переменную --main-color, которая будет содержать базовый цвет страниц. Пускай он будет чёрным:

--main-color: #000000;

За такой простотой скрывается то, что переменные имеют разные «области видимости» — участки файла, откуда ими можно воспользоваться. Это большая тема, поэтому разберём только «глобальную область видимости». Это даст возможность использовать переменную в любом участке CSS файла.

Для создания глобальной переменной её нужно указать в специальной конструкции :root. Обычно это делается в самом начале CSS файла:

:root {
  --main-color: #000000;
}

Теперь можно использовать переменную в любой части нашего CSS-кода. Это делается с помощью специальной конструкции var(--имя-переменной).

:root {
  --main-color: #000000;
}

.news-block {
  background-color: var(--main-color);
}

.left-sidebar {
  background-color: var(--main-color);
}

Если мы хотим установить другой оттенок чёрного цвета, достаточно изменить только значение переменной --main-color, и все изменения автоматически применятся к блокам с классами .news-block и .left-sidebar

Создайте переменную --main-blue и установите, в качестве значения, голубой цвет #00bfff. Переменную укажите в :root. Стили запишите в теге <style>