От автора: пользовательские свойства (также известные как 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;
}Мы также можем сделать некоторые очень крутые вещи, такие как вычисление дополнительных цветов. Эта статья, которую я написал в прошлом году, является гораздо более подробным руководством по манипулированию цветами с помощью пользовательских свойств.
Сокращенные свойства
Если вы используете сокращенное свойство, такое как animation, и вам нужно изменить одно значение для другого элемента, то повторное выписывание всего свойства может быть подвержено ошибкам и добавлять дополнительную нагрузку в обслуживании. Используя пользовательские свойства, мы можем очень легко изменить одно значение в сокращенном свойстве:
.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;
}Использование пользовательских свойств означает, что у нас есть только одна точка для настройки этого отступа. Еще лучше, если это стандартное значение, которое используется на всем сайте, мы могли бы объявить его в частичной переменной, файле конфигурации или токенах дизайна нашего сайта.
:root { --pad: 20px;
} @media (min-width: 50em) { :root { --pad: 60px; }
} .some-element { padding: 150px var(--pad) var(--pad) var(--pad);
}Сложные расчеты
Пользовательские свойства могут быть очень полезны для хранения вычисленных значений (из функции calc()), которые сами могут быть рассчитаны из других пользовательских свойств. Одним из примеров является расчет дополнительных цветов, как упоминалось ранее. Другой — когда вы хотите вычислить обратное свойство. Некоторое время назад я написал статью для CSS Tricks о том, как рассчитать обратную кривую ослабления с помощью пользовательских свойств.
Я часто использую пользовательские свойства для 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, которая обрабатывает назначение индекса элемента в качестве переменной, и очень полезна для такого типа шахматной анимации. Но было бы здорово не использовать JS!
Адам Аргайл недавно представил предложение для двух новых функций CSS, sibling-count() и sibling-index(), которые дают возможность делать много новых вещей с помощью CSS. На данный момент еще очень далеко до того, чтобы они были приняты хотя бы каким-то браузером, но это было бы невероятно мощное дополнение, так что за ними нужно следить.
Адаптивные сетки
Я уже писал об этом в своем посте, но пользовательские свойства могут помочь в управлении сложными Grid-макетами. Предположим, у нас есть сетка из 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);
}Теперь у нас есть только одно место, где нужно внести изменение.
Заключение
Это далеко не исчерпывающий список, но я обычно использую эти случаи для своего рабочего процесса и они могут помочь сделать ваш код более эффективным и поддерживаемым. Без сомнения, вы откроете для себя множество других применений!
Автор: Michelle Barker
Источник: https://css-irl.info
Редакция: Команда webformyself.