7 сценариев применения пользовательских свойств CSS

Пользовательские свойства (переменные) CSS позволяют хранить значения для повторного использования. В этой статье приводится несколько вариантов их использования.

Функции цветов

Пользовательские переменные также можно использовать для хранения отдельных значений, заданных в свойствах CSS. Например, значения цветовой модели HSLA.

.some-element {
  background-color: hsla(
    var(--h, 120),
    var(--s, 50),
    var(--l, 50),
    var(--a, 1)
  );
}

.some-element.darker {
  --l: 20;
}

Сокращенные свойства

Пользовательские переменные также позволяют изменять одно значение для определенного элемента в сокращенной форме записи CSS-свойств.

.some-element {
  animation: var(--animationName, pulse) var(--duration, 2000ms) ease-in-out
    infinite;
}

.some-element.faster {
  --duration: 500ms;
}

.some-element.shaking {
  --animationName: shake;
}

Повторные значения

Предположим, что у нас есть элемент, для которого задан верхний отступ. То же самое значение padding задано для остальных его сторон.

.some-element {
  padding: 150px 20px 20px 20px;
}

@media (min-width: 50em) {
  padding: 150px 60px 60px 60px;
}

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

:root {
  --pad: 20px;
}

@media (min-width: 50em) {
  :root {
    --pad: 60px;
  }
}

.some-element {
  padding: 150px var(--pad) var(--pad) var(--pad);
}

Сложные вычисления

В пользовательских переменных можно хранить вычисленные значения (из функции calc()), которые передаются из других пользовательских свойств.Я часто применяю пользовательские свойства с clip-path, если мне нужно вычислить контур относительно другого контура. Приведенный ниже пример демонстрирует вычисление точки контура отсечения для двух псевдоэлементов.

.element {
  --top: 20%;
  --bottom: 80%;
  --gap: 1rem;
  --offset: calc(var(--gap) / 2);
}

.element::before {
  clip-path: polygon(
    calc(var(--top) + var(--offset)) 0,
    100% 0,
    100% 100%,
    calc(var(--bottom) + var(--offset)) 100%
  );
}

.element::after {
  clip-path: polygon(
    calc(var(--top) - var(--offset)) 0,
    calc(var(--bottom) - var(--offset)) 100%,
    0 100%,
    0 0
  );
}

Постепенная анимация

Чтобы разделить анимацию на несколько дочерних элементов, то можно установить animation-delay для каждого из них. Для этого нужно определить пользовательское свойство в качестве индекса элемента:

.element {
  --delay: calc(var(--i, 0) * 500ms);
  animation: fadeIn 1000ms var(--delay, 0ms);
}

.element:nth-child(2) {
  --i: 2;
}

.element:nth-child(3) {
  --i: 3;
}

К сожалению, время мы должны назначать переменную явно. Это может стать проблемой, если есть неопределенное количество потомков. Splitting JS — это Javascript-библиотека, которая помогает в подобных сценариях. Она устанавливает индекс элемента в качестве переменной.

Адаптивные сетки

Предположим, что у нас есть сетка, состоящая из 8 столбцов. Но нам нужно добавить в ней 12 столбцов в определенной контрольной точке:

:root {
  --noOfColumns: 8;
}

@media (min-width: 60em) {
  :root {
    --noOfColumns: 12;
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--noOfColumns), 1fr);
}

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

Вендорные префиксы

Для некоторых свойств (например, clip-path) в некоторых браузерах все еще требуются вендорные префиксы. Сначала необходимо прописать вендорный префикс, а затем изменить значение свойства. Но нужно сделать так, чтобы оно было изменено и в свойстве с префиксом. Пользовательские переменные упрощают эту задачу:

.some-element {
  --clip: polygon(0 0, 100% 0, 50% 100%, 0 100%);

  -webkit-clip-path: var(--clip);
  clip-path: var(--clip);
}

Заключение

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