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