Переменные CSS (также известные как пользовательские свойства) позволяют объявлять повторно используемые и динамические значения CSS.

Долгое время распространенной проблемой, с которой сталкивалось большинство веб-разработчиков при работе с CSS, была тенденция объявлять одни и те же стили снова и снова по всей таблице стилей. Например, на веб-сайте с красной цветовой схемой вы могли бы неоднократно объявлять стиль color: red; по всей таблице стилей.

Это может привести к проблемам в поддержке стилей CSS, например, к необходимости редактировать все экземпляры объявления color: red; в таблицах стилей, когда цветовая схема должна быть изменена на фиолетовый. Введите переменные CSS.

Переменные CSS — это определяемые автором пары «свойство-значение». «Определенные автором» означает, что они не указаны в спецификации CSS, а определены вами, веб-разработчиком.

Они предоставляют способ определить декларацию CSS один раз и затем повторно использовать эту декларацию во всей таблице стилей. Это позволяет вам писать более динамичный CSS и обеспечивает более эффективный и чистый способ написания CSS.

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

Давайте начнем!

Что такое переменная CSS?

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

Чтобы инициализировать переменную CSS, вы определяете свойство с произвольным именем по вашему выбору и присваиваете ему любое допустимое значение CSS.

Синтаксис:

element {
  --variable-name: css-value;
}

Переменные CSS, как и каждое свойство CSS, должны быть определены в блоке стиля селектора CSS.

Здесь element относится к любому допустимому элементу HTML, фигурные скобки {}относятся к блоку объявления элемента --variable-name, а css-value относятся к имени переменной CSS и значению, которое вы ей присваиваете.

Обратите внимание на двойные дефисы -- в качестве префикса к имени переменной. Чтобы определить переменную CSS, необходимо добавить двойные дефисы в качестве префикса -- к имени переменной (известно как обозначение пользовательского свойства). Это гарантирует, что вы избежите случайного перекрытия имен зарезервированных свойств CSS или других свойств, начинающихся с одного дефиса, например -web-kit.

Теперь вы можете повторно использовать значения в ваших переменных CSS в качестве значений в других свойствах в ваших стилях CSS, передав имя переменной в функцию var() CSS.

Например:

child-element {
  property: var(--variable-name);
}

Функция var() анализирует переменную и возвращает ее значение.

Область действия и каскад CSS

Селектор CSS, определяющий переменную CSS, определяет, как она каскадируется через таблицу стилей и дочерние элементы этого элемента HTML.

В CSS каскад — это механизм, который определяет, насколько доступен стиль CSS для других частей таблицы стилей. Он отвечает на вопросы: «откуда можно получить доступ к определенным стилям CSS?», «откуда нельзя получить доступ?», «что может получить к нему доступ?» и «что нельзя?»

Каждый элемент HTML, на который вы ссылаетесь в CSS через селекторы CSS, создает свою область действия: пространство/среду, в которой можно получить доступ к определяемым им свойствам и стилям CSS, что также определяет, как он получает доступ к другим свойствам и стилям CSS с помощью процесса, называемого каскадированием.

Давайте рассмотрим пример, чтобы лучше это понять.

Когда вы определяете элемент HTML внутри другого элемента, например так:

<outer-element> 
<!-- also known as the "parent element" -->
  <inner-element>
      <!-- also known as the "child element" -->
  </innner-element>
</outer-element>

Внутренний элемент сможет наследовать и получать доступ к некоторым стилям CSS, определенным в наборе правил CSS внешнего элемента и его родительских элементов.

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

ℹ️ Такое поведение также применимо к переменным в других языках программирования и называется областью действия.

В результате этого общепринятой практикой является определение переменных CSS в псевдоклассе :root.

ℹ️ MDN определяет псевдокласс CSS как ключевое слово, добавляемое к селектору, которое указывает состояние выбранного элемента(ов). Например, псевдокласс :hover, означает, что указатель пользователя наведен на элемент.

Псевдокласс :root представляет элемент в корне документа в DOM. В HTML это обычно элемент <html>.

Это означает синтаксис:

:root {
  --font-size: 16px;
}

То же самое, что написать:

html {
  --font-size: 16px;
}

Разница в том, что :rootимеет гораздо более высокую специфичность. Это просто способ установки переменных CSS на селекторе, который находится как можно выше в дереве документа. Таким образом, они становятся глобально доступными в вашем файле CSS и каскадируются на каждый элемент на странице.

Однако это не всегда так, поскольку вы можете захотеть ограничить область действия ваших CSS-переменных.

В таких случаях вы можете указать переменные CSS в блоке стилей определенных элементов HTML, к которым вы хотите, чтобы они были доступны.

Например:

nav {
  --font-size: 10px; 
/* equals to two times the value of the --font-size variable - 20px */  font-size: calc(var(--font-size * 2)) 
}

nav a {
/* equals to the value of the --font-size variable - 10px */  font-size: var(--font-size) 
}

В приведенном выше блоке кода переменная CSS --font-size определена в элементе навигации nav и будет доступна только внутри него и его дочерних элементов.

Назначение переменных CSS другим переменным CSS

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

Например:

:root {
  --red: #a24e34;
  --green: #01f3e6;
  --yellow: #f0e765;

  --danger: var(--red); // will transpile back to the value of the --red variable.
  --success: var(--green);
  --warning: var(--yellow);
}

Дополнительным преимуществом здесь является читабельность, поскольку теперь вы сообщаете намерение или роль переменной. Это может помочь вам писать имена переменных, которые более читабельны, описательны и понятны.

Резервные значения

При использовании переменных CSS вы можете ссылаться на переменную, к которой нет доступа в этой части таблицы стилей из-за каскада CSS или которая просто не была определена. Используя функцию var, вы можете указать резервные значения, которые будут использоваться вместо переменной CSS, если она недоступна, содержит недопустимые значения или не определена.

Функция принимает var() два аргумента:

var(<css-variable-name>, <declaration-value>)

Где:

• <css-variable-name> — имя переменной CSS для анализа.
• <declaration-value> — это резервные значения, используемые, когда указанная переменная CSS недоступна. Это необязательный аргумент.

Давайте рассмотрим пример указания резервных значений в функции var.

:root {
  background-color: rgb(111, 6, 146);
}

body {
  background: var(--background-colour, royalpurple, rebeccapurple, purple); 
 /* There is no --background-colour, hence the fallback values will be used */}

В приведенном выше блоке кода мы определяем переменную CSS background-color в псевдоклассе :root. Но при использовании ее в bodyблоке стилей тегов она записывается как background-colour в британском английском, а не background-color как определено в псевдоклассе :root. Это приведет к тому, что переменная станет неопределенной, и браузер будет использовать первые резервные значения.

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

Однако это не будет работать, если в качестве резервных значений указаны другие переменные CSS.

.element {
  background-color: var(--default-color, --backup-color, purple);
  /* will be Invalid: "--backup-color, purple" */}

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

.element {
  background-color: var(--default-color, var(--backup-color, purple));
}

Код выше — правильный синтаксис для предоставления переменной CSS в качестве резерва. Здесь фиолетовый цвет будет использоваться только в том случае, если --default-color и --backup-color недействительны или не определены.

Другой случай, когда резервные значения полезны, — это когда значение переменной CSS не является допустимым значением для свойства, которому оно предоставлено.

Например:

:root { 
  --text-red: 14px
} 

body { 
  color: var(--text-red, red);
}

В этом фрагменте переменная CSS --text-red определена со значением 14px. Это недопустимое значение при передаче свойству color. Следовательно. Будет использовано резервное значение red.

💡 Обратите внимание: если значения, переданные во второй параметр, не поддерживаются браузером или недействительны, резервный вариант не будет применен.

Что можно делать с переменными CSS

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

Назначение допустимых типов данных переменным CSS

Каждое свойство CSS имеет набор значений, которые оно может принять. Например, свойство CSS color принимает только ключевые значения, которые описывают цвет, например, зеленый, или числовое значение цвета. Эти значения классифицируются по так называемым типам данных.

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

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

Цвета

Переменным CSS можно назначать значения ключевых слов цвета CSS и числовые значения цвета, такие как шестнадцатеричные цветовые коды. Это открывает массу гибкости в создании цветовых тем в ваших таблицах стилей.

Допустим, вы используете цветовую функцию CSS, например, нотации функций rgba() или hsl(). Вы можете разделить значения компонентов этих функций на независимые переменные CSS и легко настроить значение каждого компонента там, где вам нужно.

Это открывает множество возможностей, например, изменение значения альфа для конкретного варианта использования или, возможно, создание цветовых тем.

Например, при работе над цветом фона кнопки с функцией цвета hsl. Сохраняя каждое значение компонента функции в переменных CSS, вы можете обновлять определенные части функции hsl(), когда кнопка находится в фокусе, наведена или отключена, без явного повторного обновления свойства background кнопки в нашей таблице стилей.

Взгляните на фрагмент ниже:

.btn {
  --hue: 216;
  --saturation: 85%;
  --lightness: 28%;
  --a: 1;

  background: hsl(var(--hue), var(--saturation), var(--lightness), var(--a));
}

.btn:hover {
  /* Change the lightness on hover */  --l: 45%;
}

.btn:focus {
  /* Change the saturation on focus */  --s: 50%;
}

.btn[disabled] {
  /* Make the button look disabled */  --s: 0%;
  --a: 0.8;
}

Здесь, сохраняя каждое значение функции hsl() в переменных CSS, вы можете создать тему для состояния наведения, фокуса и отключенного состояния кнопки, просто настраивая значения каждой переменной в таблице стилей. Вместо того, чтобы повторно обновлять свойство кнопки background, мы переопределили конкретные значения hsl в правильном контексте, в котором они нужны. Это крутая штука.

Посмотрите демо здесь:

Числовые единицы

В CSS существуют различные числовые типы данных, такие как:

• Целые числа — целые числа, такие как 100или-45.
• Числа — десятичные цифры, которые могут иметь или не иметь десятичную точку с дробным компонентом, например 0.255, 128, или -1.2.
• Размеры — десятичные цифры, дополненные единицей длины CSS, например 10px, 45deg, 0.5s,.
• И проценты — числа с суффиксом в виде знака процента (%), представляющие собой дробь какой-либо другой величины. Например, 50%.

Все они могут быть назначены в качестве значений переменным CSS.

Например:

:root{
--border-size: 2.5px;
--scale-value: 1.5;
}

h1 {
  border: var(--border-size) solid black;;
}

h1:hover {
  transform: scale(var(--scale-value));
}

Струны

Вы можете назначать строки — текстовые символы, заключенные в одинарные или двойные кавычки — в качестве значений определенным свойствам CSS. Например, содержимое property при, использовании в псевдоэлементах ::before и ::after, ​​может принимать строковое значение, которое будет вставлено в DOM. Вы также можете назначать строковые значения переменным CSS.

В песочнице CoderPad выше переменная CSS --status определена для элемента ul со строковым значением "New!". Затем переменная --status используется со свойством CSS content для псевдоэлемента ::after каждого элемента li в списке для вставки дополнительного декоративного текста. Благодаря каскаду CSS мы можем изменить переменную --status в блоке стилей каждого liэлемента, чтобы вставить другой текст в его конец.

Несколько типов данных

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

Сокращенные свойства CSS позволяют вам устанавливать значения нескольких связанных свойств CSS одновременно в одном объявлении. Например, свойство CSS font — это сокращенное свойство, которое принимает несколько значений CSS, позволяющее вам указывать наиболее распространенные свойства, связанные со шрифтами, например font-style, font-weight, и т. д. Аналогично, вы можете назначить несколько значений CSS разных типов данных переменной CSS.

Хорошим примером может служить свойство CSS border. Оно принимает три значения, которые определяют ширину, стиль и цвет границы.

Теперь, вместо того, чтобы хранить эти значения в разных переменных CSS:

:root{
  --border-width: 1px;
  --border-style: solid;
  --border-color: #000;
}

.box{
  border: var() var() var();
}

Вы можете сохранить их все в одной переменной CSS и передать ее свойству.

:root{
  --border-box: 1px solid #000;
}

.box{
  border: var(--border-box);
}

ℹ️ Обратите внимание, что значения переменной CSS, переданные в сокращенное свойство, должны соответствовать синтаксису значений, ожидаемых сокращенным свойством. В противном случае такие значения будут считаться недопустимыми для свойства и не будут применены.

Используйте переменные CSS с calc()

Вы можете выполнять арифметические операции с переменными CSS, используя эту функцию calc(). Хорошим примером использования будет ситуация, когда вам нужно, чтобы определенные значения находились в определенном соотношении.

Например:

:root {
  --base-text: 16px;

  /*wil be 2 times the value of --base-text */  --big-text: calc(var(var(--base-text) * 2));

/* will be half the value of --base-text */  --mini-text: calc(var(var(--base-text)/2));
}

.h1 {
  font-size: var(--big-text);
}

.sub-text {
  font-size: var(--mini-text);
}

В блоке кода выше мы используем функцию calc(), чтобы гарантировать, что переменная --big-text всегда будет равна удвоенному значению --base-text и половине значения --mini-text, независимо от того, что --base-text есть. Это помогает нам избежать жесткого кодирования таких значений с нуля.

Другим вариантом использования функции calc() с переменными CSS может быть объединение различных единиц CSS для создания значений, которые невозможно представить с помощью традиционных единиц CSS.

Например:

--nav-height: 8rem;
--main-height: calc(100vh - var(--nav-height));;
}

main {
  height: var(--main-height);
}

nav {
  height: var(--nav-height);
}

Здесь мы гарантируем, что основная секция займет большую часть высоты области просмотра, за исключением высоты панели навигации, используя функцию вычитания высоты calc() панели навигации 8rem из высоты области просмотра 100vh в переменной --main-height.

Теперь, независимо от высоты области просмотра, тег main всегда будет 8rem, короче полной высоты экрана.

Изменить CSS-переменные ниже в каскаде

Вы можете изменять значения CSS-переменных ниже в каскаде.

Например, вы можете перезаписать значение глобальной переменной, определенной в :rootпсевдоклассе в книге стилей другого элемента.

:root{
  --base-font: 16px;
}

.hero-container {
  --base-font: 20px;
  font-size: var(--base-font)
}

Таким образом, переменная --base-font будет установлена ​​в значение 16px для всех остальных элементов в DOM, за исключением элемента с классом hero-container и всех его дочерних элементов, для которых она будет установлена ​​в значение 20px.

Варианты использования

Существует множество приложений для использования переменных CSS в вашей таблице стилей. Давайте рассмотрим некоторые из этих вариантов использования.

Реализуйте стили, которые отображаются условно

Всякий раз, когда возникает необходимость реализовать динамические стили, т. е. стили, которые изменяются в зависимости от состояния приложения, вы обычно выбираете решение с использованием JavaScript или JSX. С помощью переменных CSS вы можете перенести такие задачи с JavaScript и более на CSS и объявлять условно визуализированные стили, используя только CSS.

Давайте рассмотрим пример реализации темной и светлой тем для веб-сайта на основе предпочтений темы пользовательского агента (операционной системы) с использованием только CSS.

Если вы не использовали переменные CSS, у вас, вероятно, будет класс .dark-theme и .light-theme, который будет содержать стили для каждой темы, а затем вы используете JavaScript для условного применения класса .dark-theme или .light-theme к html элементу на основе цветовой схемы пользователя.

С переменными CSS нам не понадобятся классы для хранения стилей для каждой темы. Мы можем просто использовать prefers-color-scheme медиа-запрос для определения предпочтений пользователя в отношении темы и сохранять цвета для каждой темы в переменных CSS, определенных в :root псевдоэлементе.

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

@media (prefers-color-scheme: light) {
 :root {
    --background-color: #fff;
    --text-color: #000;
  }
}

@media (prefers-color-scheme: dark) {
 :root {
    --background-color: #000;
    --text-color: #fff;
  }
}

Это возможно, поскольку переменные CSS каскадируются; следовательно, переменные, объявленные в :root, который является наивысшим элементом в DOM, доступны всем дочерним элементам.

Доступ к переменным CSS в JavaScript

Преимуществом использования собственных переменных CSS по сравнению с переменными в языках препроцессора, таких как Sass, Less или Stylus, является то, что вы можете легко получать доступ, создавать и обновлять переменные CSS с помощью JavaScript.

Переменные CSS ограничены DOM и его элементами; поэтому к ним можно получить доступ в JavaScript с помощью API браузера getPropertyValue, setPropertyValue.

Метод getPropertyValue возвращает значение свойства CSS, указанного для элемента.

Например, приведенный ниже фрагмент вернет значение свойства CSS --theme, которое является переменной CSS, определенной для элемента :root.

const root = document.documentElement;

const theme = root.style.getPropertyValue("--theme");

Метод setPropertyValue устанавливает значение для свойства CSS, указанного для элемента, или объявляет его, если это свойство не определено.

Например, фрагмент ниже устанавливает значение переменной :root CSS элемента --base-color #000, когда пользователь щелкает элемент dark-theme-btn. Если переменная не существует, она будет объявлена ​​с этим значением.

const dark-theme-btn = document.getElementByid("dark-theme-btn")

dark-theme-btn.onclick = (e) => {
  e.preventDefault()
  document.documentElement.setPropertyValue("--base-color", "#000")
}

Переменные CSS являются динамическими. Браузер перерисует DOM с их обновленными значениями, когда они изменятся (через JavaScript или с помощью медиа-запроса).

В приведенном выше блоке кода горизонтальные и вертикальные положения логотипа сохраняются с помощью переменных CSS. Мы используем JavaScript, чтобы задать значения этих переменных в соответствии с положением мыши при ее перемещении по экрану.

Это не относится к переменным в языках препроцессора, таких как SCSS, поскольку они преобразуются в значение при компиляции и остаются с этим значением.

Попробуйте также переменные CSS!

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

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

Чего вы ждете? Попробуйте переменные CSS уже сегодня!