От автора: скоро в CSS появятся встроенные переменные, и в этой статье я хотел бы рассказать вам об их отличии от переменных, которые есть в препроцессорах, а также о том, как их использовать.
Во всех языках программирования существуют переменные и не просто так, а потому что они очень полезны. В переменную можно всего раз записать значение и потом использовать его везде, не повторяя код. CSS не является языком программирования и то, что в каскадных таблицах стилей нет переменных сильно ограничивает их возможности.
Преимущества пользовательских переменных
В синтаксисе пользовательских переменных довольно много букв, что по мнению некоторых разработчиков некрасиво. Также отбивает желание использовать нативные переменные тот факт, что в Sass уже есть поддержка переменных.
В препроцессорах типа Sass есть переменные, однако они все еще сталкиваются с некоторыми ограничениями, о которых мы сейчас поговорим.
Переменные в препроцессорах нельзя обновить через медиа запросы. Чтобы сделать сайт адаптивным, вам необходимо менять значения по разрешениям экрана. Переменные в препроцессорах не умеют этого делать. К примеру, разберем код ниже:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее|
1 2 3 4 5 6 7 8 9 |
$article-margin: 1em 0.5em; @media (min-width: 1024px) { $article-margin: 2em 1em; } .my-article { margin: $article-margin; } |
Код компилируется в:
|
1 2 3 |
.my-article { margin: 1em 0.5em; } |
Как видно, код в медиа запросе игнорируется. CSS переменные видят код в медиа запросах.
Точно так же переменные в препроцессорах не каскадируются и не наследуют значений. Родные переменные избавляют вас от этих ограничений. Еще одним немаловажным плюсом встроенных переменных является их совместимость. В отличие от Sass переменных, работающих только в своем препроцессоре, нативные переменные будут работать со всеми препроцессорами и в обычных файлах стилей.
Синтаксис и использование
Чтобы понять, как использовать пользовательские свойства CSS, давайте разберем простой пример:
|
1 2 3 4 5 6 7 |
:root { --text-color: crimson; } .my-section { color: var(--text-color, black); } |
При создании пользовательского свойства вы начинаете с объявления области его действия. Область действия определяет те узлы в DOM, на которые будет распространяться данное свойство. Запись :root означает, что пользовательское свойство будет доступно для всех элементов. Помните, что все пользовательские свойства должны начинаться с двух знаков тире.
Если вы собираетесь работать с пользовательскими свойствами, то ссылаться на переменную нужно через функцию var(). Функция принимает два аргумента: само пользовательское свойство и фолбэк значение. Фолбэк значение используется в тех случаях, когда для какого-либо родителя не задано пользовательское свойство, или значение имеет неверный формат.
Стоит учесть, что пользовательские свойства регистро-зависимы. То есть —text-color , —Text-Color и —text-Color разные переменные.
Также стоит помнить еще о паре вещей при работе с функцией var().
Во-первых, фолбэк значения можно разделять запятой. В случае с сокращенными значениями типа margin, вам не нужно отделять каждое значение запятой. К примеру, var(—para-font-family, «Lato», «Roboto»); задаст фолбэк значение «Lato» «Roboto»;. Точно также и для фолбэка для свойства border:
|
1 2 3 |
a { border : var(--link-border, 1px dotted brown); } |
Во-вторых, нельзя использовать переменные в качестве свойств. Следующий код выдаст ошибку в строке 2.
|
1 2 3 4 |
h1 { --my-size: font-size; var(--my-size): 2em; } |
Установка значений через calc()
С основами покончено, давайте посмотрим, как создавать переменные из пользовательских свойств. Если в переменную поместить только число, вы не сможете вставить такое значение напрямую в какие-то единицы измерения. Код ниже работать не будет:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее|
1 2 3 4 |
.quote { --t-padding: 20; padding-top: var(--t-padding)px; // Не сработает } |
Для создания правильного значения вам придется воспользоваться функцией calc(). Чтобы код сверху заработал, его необходимо переписать:
|
1 2 3 4 |
.quote { --t-padding: 20; padding-top: calc(var(--t-padding) * 1px); // Будет работать } |
Работать можно не только с единицами измерения px. Можно использовать все доступные в CSS единицы измерения.
Использование переменных с JavaScript
Нативные CSS переменные могут взаимодействовать с JS. Чтобы получить значение, необходимо использовать код ниже:
|
1 2 |
var styles = getComputedStyle(document.documentElement); var bgValue = String(styles.getPropertyValue('--background')).trim(); |
Метод trim() удалит пробелы с обоих концов значения. Для записи значения в пользовательское свойство необходимо использовать метод setProperty().
|
1 |
document.documentElement.style.setProperty('--background', 'black'); |
Теперь в переменной —background хранится значение black. Также можно в одном пользовательском свойстве ссылаться на другое при помощи функции var().
|
1 |
document.documentElement.style.setProperty('--h-color', 'var(--p-color)'); |
Код выше полностью валиден, значения —h-color и to —p-color равны.
Динамическая смена тем
Переменные очень удобны для смены тем на основе настроек пользователя. Раньше вам приходилось бы писать инлайновые стили или создавать несколько файлов стилей. У обоих методов есть свои недостатки. Несколько файлов стилей – головная боль, а инлайновые стили – плохая практика. В этой ситуации нас сильно выручают переменные. Ниже представлен стандартный JS код для динамической смены тем:
|
1 2 3 4 5 6 7 8 |
document.getElementById("greenish").addEventListener("click", greenTheme); function greenTheme() { var greenShades = document.documentElement.style; greenShades.setProperty('--theme-font', 'Dosis'); greenShades.setProperty('--heading-background', 'hsl(90, 70%, 60%)'); // другие значения } |
Код выше цепляет событие click к кнопке нашей темы. По клику функция greenTheme() изменяет значения нескольких переменных, что полностью меняет внешний облик сайта. Как видно, этот метод было намного легче воплотить, чем два других.
Можете добавить несколько переменных и создать еще пару тем в демо на CodePen.
Заключительные мысли
По уроку может показаться, что нативные CSS переменные намного лучше переменных в препроцессорах, однако я ни в коей мере не оспариваю полезность препроцессоров. Использование нескольких CSS препроцессоров повышает продуктивность. К тому же, препроцессоры помимо переменных могут еще много чего предложить. Множество встроенных функций, циклы и условные выражения ускорят вашу работу.
Вывод данного урока в том, что, несмотря на сложный синтаксис, встроенные переменные могут много чего предложить, и их нужно использовать в своих проектах. Если у вас возникли какие-либо вопросы по уроку, пишите об этом в комментариях.
Автор: Monty Shokeen
Источник: //code.tutsplus.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
