Переменные неизменно существуют во всех языках программирования, и это потому, что они довольно полезны. Вам просто нужно сохранить значение в переменной один раз, а затем вы можете использовать его позже несколько раз, избегая повторения. Хотя CSS не является языком программирования, отсутствие переменных все еще ограничивает его возможности.
Теперь, когда есть собственные переменные CSS, я хотел бы обсудить, чем они отличаются от переменных, которые предоставляют препроцессоры CSS, и как их правильно использовать.
Преимущества пользовательских свойств
Синтаксис использования пользовательских свойств немного многословен, и некоторые разработчики могут посчитать это уродливым. Еще одним фактором, который препятствует использованию собственных переменных, является существующая поддержка, предоставляемая переменными Sass.
Хотя препроцессоры, такие как Sass, поддерживают переменные, они все же имеют некоторые ограничения, которые я буду обсуждать в этом разделе.
Вы не можете обновить переменные препроцессора, основываясь на медиазапросах. Чтобы сделать сайт отзывчивым, вам нужно изменить значения в зависимости от размеров экрана. Переменные препроцессора не могут этого сделать. Например, рассмотрим следующий код:
|
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, которые будут работать только с Sass, нативные переменные будут работать не только со всеми препроцессорами, но и с простыми CSS-файлами.
Синтаксис и использование
Чтобы понять, как использовать пользовательские свойства 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);
}
|
Во-вторых, вы не можете использовать переменные в качестве имен свойств. Следующий код выдаст ошибку во втором объявлении.
|
1
2
3
4
|
h1 {
—my-size: font-size;
var(—my-size): 2em;
}
|
Установка значений с помощью Calc ()
Изучив основы, давайте посмотрим, как мы можем создавать значения из пользовательских свойств. Если вы присвоили пустой номер переменной, вы не сможете добавить ее непосредственно к какой-либо единице, чтобы получить действительное значение. Короче говоря, код ниже недействителен:
|
1
2
3
4
|
.quote {
—t-padding: 20;
padding-top: var(—t-padding)px;
}
|
Вам придется использовать функцию calc() для выполнения нескольких вычислений и построения окончательных значений CSS. Чтобы приведенный выше код работал, вам нужно изменить его так:
|
1
2
3
4
|
.quote {
—t-padding: 20;
padding-top: calc(var(—t-padding) * 1px);
}
|
Вы не ограничены только px . Вы можете использовать все действительные единицы, которые доступны в CSS.
Использование переменных с JavaScript
Нативные переменные CSS также могут взаимодействовать с JavaScript. Чтобы получить их значения, вы можете использовать следующий код:
|
1
2
|
var styles = getComputedStyle(document.documentElement);
var bgValue = String(styles.getPropertyValue(‘—background’)).trim();
|
trim() удалит пробелы с обоих концов вашего значения.
Если вы хотите установить значение пользовательского свойства, вам придется использовать метод setProperty() .
|
1
|
document.documentElement.style.setProperty(‘—background’, ‘black’);
|
Переменная --background теперь черная. Вы также можете установить одно пользовательское свойство для ссылки на другое, используя функцию var() .
|
1
|
document.documentElement.style.setProperty(‘—h-color’, ‘var(—p-color)’);
|
Вышеприведенное утверждение полностью допустимо и устанавливает значение --h-color равным --p-color .
Динамическое изменение тем
Переменные могут обеспечить большую гибкость, когда речь идет о смене тем в зависимости от предпочтений пользователя. Ранее вам приходилось либо использовать встроенные стили, либо создавать несколько таблиц стилей. Оба эти метода имеют свои недостатки. Создание нескольких таблиц стилей — головная боль, а использование встроенных стилей — плохая практика. Переменные могут обеспечить легкий выход в этой ситуации. Вот несколько основных JavaScript для динамического изменения тем:
|
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%)’);
// Set more such values
}
|
Код выше прикрепляет событие click к нашей кнопке темы. Как только кто-то нажимает на него, функция greenTheme() устанавливает значения нескольких переменных, чтобы изменить общий вид сайта. Как видите, этот метод был гораздо проще реализовать, чем два других решения.
Вы можете попробовать добавить еще несколько переменных или создать больше тем в этой демонстрации CodePen .
Последние мысли
Учебник может показаться, что нативные переменные CSS превосходят переменные в препроцессорах, таких как Sass, но я никоим образом не подрываю полезность препроцессоров. Использование различных CSS-препроцессоров повышает производительность. Они могут предложить гораздо больше, чем просто переменные. Многочисленные встроенные функции, циклы и условные операторы могут выполнять задачи быстро.
В этом уроке просто указывается, что даже если нативные переменные имеют странный синтаксис, они все же могут предложить гораздо больше и их стоит использовать в ваших проектах. Если у вас есть какие-либо вопросы относительно этого урока, дайте мне знать в комментариях.