Переменные

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

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

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

--main-color: #000000;

Переменные наследуются также, как и простые свойства CSS, поэтому их необходимо указывать у конкретного тега, и переменная будет доступна у всех элементов внутри этого тега. Если переменную нужно «встроить» глобально, то используется специальный синтаксис :root, и внутри него записываются все нужные переменные.

: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


Нашли ошибку? Есть что добавить? Пулреквесты приветствуютсяhttps://github.com/hexlet-basics

Упражнение доступно только авторизованным пользователям.

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