Курс 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>
Как с вами связаться? 🙃
Команда проекта находится в телеграм-сообществе. Там можно задать любой вопрос и повлиять на проект
Упражнение не проходит проверку — что делать? 😶
Если вы зашли в тупик, то самое время поговорить с нашим асситентом Тота во вкладке "ИИ-помощник":
В моей среде код работает, а здесь нет 🤨
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя 🤔
Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи. В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно 🙄
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в обратной связи нашего сообщества
Привет! Я Тота и моя задача помочь в обучении. Чтобы активировать меня, нужно зарегистрироваться или залогиниться, если у вас уже есть аккаунт
Ваше упражнение проверяется по этим тестам
1const { test } = require('tests');
2
3test(({ query, expect, html }) => {
4 expect(html).to.contain(':root');
5 expect(html).to.contain('--main-blue');
6 expect(html).to.contain('#00bfff');
7});
8Решение учителя откроется через:
