7 примеров использования CSS переменных

15 декабря 2019 г.

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

Перевод статьи 7 Uses for CSS Custom Properties

Кастомные свойства (также известные как CSS переменные) позволяют нам хранить значения различных CSS свойств для их дальнейшего переиспользования. Если вы сравнительно недавно про них узнали, то возможно вы удивитесь тому, насколько они круче переменных в известных CSS препроцессорах. Почитайте руководство по работе с переменными в 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;
}

Ещё мы можем делать всякие крутые штуки, например высчитывать добавочные цвета. В этой статье вы можете более детально узнать о манипуляциях с цветами при помощи кастомных свойств. Также у Sara Soueidan есть отличная статья по этой теме.

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

Если вы используете сокращения в таких свойствах, как animation и нужно поменять одно значение только для другого элемента, то написание всех свойств заново может привести к ошибках и прибавить лишней тягомотины при последующей работе с кодом. Используя кастомные свойства мы можем очень легко изменить одно значение в сокращённом варианте нужного CSS свойства:

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

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

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

Повторяющиеся значения

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

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

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

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

:root {
  --pad: 20px;
}

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

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

Комплексные вычисления

Кастомные свойства могут быть довольно удобным инструментов для хранения значений, посчитанных при помощи calc() функции, которые, кстати, могут быть посчитаны из других кастомных свойств. Один такой пример это вычисление дополнительных цветов, как упоминалось выше. Ещё один это то, когда вам надо посчитать инверсию свойства. Я написал статью на CSS Tricks, там объясняется то, как посчитать реверс плавности в анимации при помощи кастомных свойств.

Я часто использую CSS переменные в clip-path, если мне надо посчитать один path относительно другого или относительно других известных переменных. В следующем коде мы посчитаем 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 это отличная библиотека, которая позаботится об этом, назначив индекс элемента, как переменную, да и она вообще довольно полезна для такого рода поочередных анимаций. Но конечно же, все было бы круче без привлечения JS.

Adam Argyle недавно предложил две новых CSS функции, sibling-count() и sibling-index(), которые бы значительно поменяли ситуацию, сделав возможными много новых вещей на чистом CSS. Они еще не применяются ни одним из браузеров, но это будет чрезвычайно сильным пополнением в инструментарии CSS, так что надо следить за их возможным релизом.

Адаптивные гриды

До этого, я уже об этом писал, но кастомные свойства помочь в создании сложных шаблонов на гридах, упростив управление их поведением. Предположим, что у нас есть грид в 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 переменных, но это те, которые я обычно нахожу полезными в процессе своей работы и те, которые делают мой код более эффективным и поддерживаемым. Без сомнений, вы откроете для себя куда больше примеров их использования!

Стандарты написания гибкого, надежного и жизнеспособного HTML c CSS CSS свойство background-image как антипаттерн