Code Ready | Frontend
Фотография
нажмите — покажем
нажмите — покажем
CSS теперь разрешает создавать собственные функции!
В дизайн-системах постоянно повторяются одни и те же вычисления.
.card {
padding: calc(6 * 4px);
}
.modal {
gap: calc(4 * 4px);
}
Можно вынести саму логику вычисления в @function.
@function --space(--n) {
result: calc(var(--n) * 4px);
}
И дальше использовать её практически как встроенную CSS-функцию.
.card {
padding: --space(6);
}
.modal {
gap: --space(4);
}
Параметры можно типизировать, чтобы функция принимала только ожидаемые значения.
@function --space(--n <number>) returns <length> {
result: calc(var(--n) * 4px);
}
Причём функция может содержать не только calc(): внутри доступны локальные CSS-переменные и условная логика, а одна пользовательская функция может вызывать другую.
Поддержка пока ограничена.
🔥 Смысл @function не в сокращении пары строк. CSS получает переиспользуемую логику с аргументами и типами — то, ради чего раньше приходилось повторять формулы или переносить вычисления в препроцессор.
📣 Code Ready | #совет
46 · 1.6K ·