От автора: привет! Сегодня мы с вами поговорим о CSS переменных. Статья будет состоять из двух секций. В первой я опишу, как создавать CSS переменные, во второй – как их использовать.
У меня есть очень хороший пример на CodePen, с которым вы можете поиграться в конце страницы. Вы легко сможете поменять там код, я старался все помечать и комментировать.
CSS переменные
Переменные стали нативным инструментом в CSS, теперь они есть не только в препроцессорах. В CSS препроцессорах типа Sass переменные очень популярны.
Чем лучше поддержка переменных в браузерах (без Edge и IE), тем легче их использовать в коде.
Как объявлять CSS переменные
Лучше всего объявлять CSS переменные в псевдоклассе :root в шапке стилей. Псевдокласс :root относится к самому верхнему родителю в DOM, обычно это тег HTML. Один из универсальных селекторов.
Такое объявление сохраняет организацию кода и спасает от повторных объявлений переменных. Быстрый пример, как создать CSS переменную.
|
1 2 3 |
:root { --primary-color: red; } |
Псевдокласс :root выступает в роли селектора. Переменная начинается с двух знаков тире, после чего следует имя переменной и значение. Далее в коде на созданную переменную можно ссылаться во всех подходящих для этого случаев. Пример:
|
1 2 3 4 5 6 7 |
:root { --primary-color: red; } p { background-color: var(--primary-color); } |
В этом примере мы меняем цвет фона для всех параграфов на значение, записанное в переменной —primary-color. В этой переменной, которая лежит в псевдоклассе :root, уже записано значение red.
Как правильно использовать CSS переменные
Переменные могут вызвать множество проблем в коде. К примеру, возьмем объявление переменной ниже.
|
1 2 3 |
:root { --red: #f44336; } |
Если вам понадобится поменять цвет с красного на синий, вам либо придется использовать по всему коду переменную с неправильным именем, либо менять переменную во всех местах.
Скорее всего, вы хотели бы избежать обеих проблем, так как они убивают идею быстрого и легкого редактирования кода.
Более правильно создавать CSS переменные, как показано ниже, в два этапа:
|
1 2 3 4 |
:root { --red: #f44336; --primary-color: var(--red); } |
Двухэтапное создание переменных, как показано выше, позволяет просто и эффективно редактировать код. Если вам понадобиться изменить оттенок красного во всех стилях, нужно будет всего лишь изменить переменную —red. Иначе вам пришлось бы менять все значения вручную.
Также на уровне переменных таким способом можно менять основной цвет на сайте. Если нужно поставить синий цвет, вам нужно сделать всего два шага.
Сначала нужно объявить переменную с синим цветом, затем прописать ее в качестве значения основного цвета. Ниже показан пример на основе предыдущего.
|
1 2 3 4 5 |
:root { --red: #f44336; /*Предыдущий основной цвет*/ --blue: #00BAF0; /*Новый основной цвет*/ --primary-color: var(--blue); /*Сменили --red на --blue*/ } |
Практическое применение
У CSS переменных есть много примеров практического (и непрактического) применения. Я расскажу про практические с моей точки зрения.
Руководства по цветам и стилям
С помощью переменных можно создавать руководства по стилям и с легкостью вносить в них изменения. Самый лучший способ. Ниже приведен практический пример руководства по стилям с использованием цветов.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
:root { /*Цвета*/ --blue: #00BAF0; --white: #fff; --gray: #f4f4f4; --orange: #FF9545 --green: #4c6520; /*Руководство по стилям*/ --primary-color: var(--blue); --secondary-color: var(--white); --accent-color: var(--gray); --button-1: var(--orange); --button-2: var(--green); } |
В долгосрочной перспективе такой процесс позволяет быстро и просто редактировать код. Можно внести мелкие изменения в цвет и не редактировать весь CSS.
Также такое объявление позволяет семантически размечать CSS, чтобы потом не путаться. Все очень просто.
Margin’ы и padding’и
С помощью переменных можно задавать margin’ы и padding’и по умолчанию. Пример:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
:root { --general-margin: 10px 0; --general-margin-2: 20px 5px; --general-padding: 10px; } /*БЛОКИ ДЛЯ КОНТЕНТА*/ .box { margin: var(--general-margin); padding: var(--general-padding); } .box-2 { padding: var(--general-padding); } |
Высота и ширина
Интересная тема, с помощью CSS функции calc() можно проводить вычисления. Перед объяснением я приведу пример:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
:root { --parent-height: 43%; --parent-width: 40%; } .parent { height: var(--parent-height); width: var(--parent-width); } .child { height: calc(var(--parent-height) - 100px); width: calc(var(--parent-width) - 60px); } |
Можно задать размеры для родительского блока и вычислять размеры дочерних элементов относительно родителя. Способ отлично работает, особенно для создания адаптивных элементов.
Другие способы применения переменных в стилях
Переменные хорошо подходят для стилизации шрифтов, теней (box-shadow), анимаций и т.д. Переменные можно использовать любыми способами.
Просто не забывайте про семантику при объявлении и хорошо продумывайте их назначение. Слишком много переменных могут засорять код. Пример раздутого кода можете посмотреть ниже.
Примечание: демо ниже можно редактировать прямо на странице.
Демо с CSS переменными
Автор: Derek Fletes
Источник: //blog.zingchart.com/
Редакция: Команда webformyself.
