description.ru.yml

---

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

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

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

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

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

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

  ```css
  --main-color: #000000;
  ```

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

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

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

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

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

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

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

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

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