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-код более эффективным.

Пожалуйста, опубликуйте ваши комментарии по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, отклики, дизлайки, лайки, подписки!

Пожалуйста, оставляйте ваши мнения по текущей теме статьи. За комментарии, дизлайки, подписки, отклики, лайки низкий вам поклон!

Вадим Дворниковавтор-переводчик статьи «7 Uses for CSS Custom Properties»