Переменные CSS в чистом CSS — начало работы за 5 минут или меньше

CSS-переменные (или официально: пользовательские свойства ) в чистом CSS значительно экономят время для тех, кто готов потратить пять минут на изучение того, как их использовать. Они существуют со времен CSS3, и у 92% всех пользователей есть браузеры, которые их поддерживают. Использование переменных CSS не требует каких-либо существенных изменений в существующих таблицах стилей или новых инструментов и может быть легко применено к старым проектам. Вместо того, чтобы записывать шестнадцатеричный код цвета в сотнях мест в файле, вы можете определить его только в одном месте — с помощью переменной CSS. Огромная экономия времени и помощь в создании более согласованных таблиц стилей.

Подождите, так это Saas or Less, верно?

Нет, здесь мы говорим о чистом CSS, а не о CSS в сочетании с препроцессором, таким как Saas, Less или SCSS. Использование переменных CSS не требует никаких дополнительных инструментов, редакторов или изменений в вашем рабочем процессе или чем-то еще, что вы используете. Таким образом, существующие файлы CSS без переменных не требуют каких-либо «особых» изменений, и вы можете смешивать и сочетать — использовать переменные только для частей файла или только в некоторых файлах вашего проекта.

Препроцессоры CSS, такие как Saas или Less, также поддерживают переменные. Кроме того, они имеют гораздо больше функций и опций, которые вы можете использовать. Однако, как следует из названия, для них требуется препроцессор — инструмент, который преобразует CSS, написанный в Saas, в чистый CSS. Если вам нужны только переменные — в чистом CSS есть все, что вам нужно.

Переменные CSS — это нативная функция, и это делает их замечательными. С минимальными усилиями ваши таблицы стилей станут гораздо более читабельными и согласованными. Более того, любые изменения, которые вам придется вносить позже, сделать намного проще — определенно быстрее, чем выполнять поиск и замену, когда вам нужно изменить цветовой код в сотнях мест .

Давайте создадим несколько переменных

Как и в любом языке программирования, использование переменных состоит из двух шагов : присвоение им значения (определение их) и их использование (помещение их во все места, где вам нужно это значение). Мы сделаем то же самое;

:root {
  --my-red: #ff0080;
  --my-shadow: 3px 3px 10px green;
  --my-border: 1px solid #222222;
}

.custom-box {
  box-shadow: var(--my-shadow);
}

.custom-text {
  color: var(--my-red);
  border: var(--my-border);
}

Если вы хотите использовать переменную глобально (где угодно) в файле CSS, вы должны определить ее в псевдоклассе :root . Расположение в файле не имеет значения. Это может быть начало или конец файла. Но вы должны поместить переменную в :root . Имя должно начинаться с двойного тире и не может содержать пробелов -- Переменные CSS могут содержать любое значение, которое вы обычно присваиваете свойству CSS; от простых значений, таких как цвета, до сложных выражений для сокращенных свойств, таких как фон или тень.

Чтобы использовать переменную (чтобы получить ее значение), поместите ее в функцию var() . Не забывайте, что все имена переменных начинаются с -- . Это все, что вам нужно знать, чтобы начать.

Использование резервных значений

В случае, если переменная не определена, резервное значение может быть предоставлено функции var() в качестве второго параметра.

:root {
  --my-red: #ff0080;
  --my-blue: #0020ff;
  --my-shadow: 3px 3px 10px green;
}

.custom-box {
  box-shadow: var(--my-shadow, 2px 2px 5px blue);
}

.custom-text {
  color: var(--my-red, var(--my-blue, red));
}

Не беспокойтесь, если значение свойства является сложным. Запасной параметр позволяет использовать запятые (см. пример box-shadow ). Он также позволяет объединять несколько функций var() , как показано для цвета в .custom-text . Если --my-red и --my-blue не определены, то в качестве цвета будет использоваться красный цвет.

Комбинация var() и calc() тоже работает без каких-либо сюрпризов в синтаксисе. Вот пример, включающий локальную переменную, доступную только в классе, в котором она была определена.

.box {
  --padding: 10px;
  
  height: calc(var(--padding) + 100px);
  padding: var(--padding);
}

Используйте calc() экономно. Это неплохо, но при чрезмерном использовании становится довольно проблематично отлаживать и поддерживать.

Получение и установка переменных CSS через JavaScript

Используя простой JavaScript, вы можете устанавливать новые переменные CSS и получать доступ к их значениям. Я не использую этот метод. Вместо этого я предпочитаю изменять класс элемента. Однако нет ничего плохого, если вы хотите получить доступ к переменным CSS через JavaScript. Это, безусловно, полезно в некоторых ситуациях. Те, кто придерживается jQuery, могут преобразовать код в плагин jQuery.

Чтобы создать новую переменную или изменить значение существующей, используйте:

// set var value
document.documentElement.style.setProperty('--my-var', 'blue');

Доступ к переменной немного сложнее. Если переменная определена через JS, используйте:

// get var value if defined via JS
document.documentElement.style.getPropertyValue('--my-var');

Однако, если он определен через CSS (а так обычно и бывает), используйте этот код:

// get var value if defined via CSS
getComputedStyle(document.documentElement,null).getPropertyValue('--my-var');

Проблемы и на что обратить внимание

Теперь, когда вы знаете, как использовать переменные, не переборщите с ними и создайте переменную для каждого отдельного значения свойства в таблице стилей. Например, это было бы излишеством и злоупотреблением всей концепцией;

:root {
  --spacing-10: 10px;
}

.custom-box {
  padding: var(--spacing-10);
}

Ты ничего не добился. Только что получил --spacing-10 вместо 10px . Вскоре вы создадите еще двадцать переменных для каждого значения пикселя отступа от 5 до 100 пикселей. Если вы стремитесь к согласованности, используйте концепцию --small-padding, --medium-padding, --large-padding и назначьте соответствующие числовые значения.

Хотя это и не требуется стандартом CSS, я искренне рекомендую определять все переменные в одном месте и в начале файла CSS . Таким образом, вы всегда будете знать, где они находятся, и сможете быстро изменить значения. Если вы разбросаете определения по всему файлу, вам будет сложно отслеживать вещи, и вы можете в конечном итоге определить одну и ту же переменную в нескольких местах. Отладка этого не будет веселой задачей.

Нет причин не использовать переменные CSS

В Интернете все происходит быстро (например, файлы cookie заменяются локальным хранилищем). Для больших проектов и больших команд переход на препроцессоры CSS, такие как Saas, — правильный путь. Однако для небольших проектов или существующих проектов, требующих обслуживания, CSS-переменные в чистом CSS — правильное решение . Они не требуют абсолютно никаких изменений, обновлений программного обеспечения или инструментов или чего-то еще. Вы определяете переменную и начинаете ее использовать.