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