Современный сайт содержит тысячи строк стилей. Стили для блоков, текста, небольших областей — всё это часто лежит в одном месте. Представьте ситуацию: есть определённый оттенок красного цвета, который мы используем во множестве различных блоков.
Насколько удобно будет изменить все значения, если захочется изменить базовый цвет? Правильно — придётся находить все значения внутри файла и заменять их на новые.
Долгое время это было одной из главных проблем 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>
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.