От автора: некоторое время назад вы, возможно, столкнулись со статьей о продвинутых приемах CSS, в которой я описал, как можно использовать миксины для автоматизации адаптивных размеров шрифтов с помощью RFS. В своей последней версии v9, RFS способен перемасштабировать любое значение для любого свойства CSS в единицах px или rem, такого как margin, padding, border-radius или даже box-shadow.
Сегодня мы сосредоточимся на реализации PostCSS. Первое, что нужно сделать, это установить RFS с помощью npm:
|
1 |
npm install rfs |
Следующий шаг — добавить RFS в список плагинов PostCSS. Если вы используете файл postcss.config.js, вы можете добавить его в список других плагинов PostCSS (например, Autoprefixer):
|
1 2 3 4 5 6 |
module.exports = { plugins: [ require('rfs'), require('autoprefixer'), ] } |
После настройки вы сможете использовать функцию rfs() в любом месте в собственном CSS. Например, если вы хотите, чтобы размеры шрифтов были адаптивными:
|
1 2 3 |
.title { font-size: rfs(4rem); } |
… или используйте его с любым другим свойством:
|
1 2 3 4 5 6 7 8 |
.card { background-color: #fff; border-radius: rfs(4rem); box-shadow: rfs(0 0 2rem rgba(0, 0, 0, .25)); margin: rfs(2rem); max-width: 540px; padding: rfs(3rem); } |
Код выше выведет следующий CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.card { background-color: #fff; border-radius: calc(1.525rem + 3.3vw); box-shadow: 0 0 calc(1.325rem + 0.9vw) rgba(0, 0, 0, .25); margin: calc(1.325rem + 0.9vw); max-width: 540px; padding: calc(1.425rem + 2.1vw); } @media (min-width: 1200px) { .card { border-radius: 4rem; box-shadow: 0 0 2rem rgba(0, 0, 0, .25); margin: 2rem; padding: 3rem; } } |
Вот пен, который демонстрирует, как все работает. Вы можете изменить размер демо-версии, чтобы увидеть масштабирование в действии.
Более глубокий взгляд на то, как RFS анализирует CSS
Плагин ищет все вхождения функции rfs() в значениях объявлений и заменяет функцию текучим значением, используя функцию calc(). После каждого правила RFS генерирует медиа-запрос с дополнительным CSS, который не позволяет значениям становиться слишком большими.
RFS конвертирует только значения px и rem; все остальные значения (например, em, числа или цвета) будут игнорироваться. Функцию также можно использовать несколько раз в объявлении, например:
|
1 |
box-shadow: 0 rfs(2rem) rfs(1.5rem) rgba(0, 0, 255, .6) |
RFS и пользовательские свойства
|
1 2 3 4 5 6 7 |
:root { --title-font-size: rfs(2.125rem); --card-padding: rfs(3rem); --card-margin: rfs(2rem); --card-border-radius: rfs(4rem); --card-box-shadow: rfs(0 0 2rem rgba(0, 0, 0, .25)); } |
Эти переменные могут быть использованы в CSS позже.
|
1 2 3 4 5 6 7 8 |
.card { max-width: 540px; padding: var(--card-padding); margin: var(--card-margin); background-color: #fff; box-shadow: var(--card-box-shadow); border-radius: var(--card-border-radius); } |
Надеюсь, вы найдете эти обновления полезными в своей работе.
Автор: Martijn Cuppens
Источник: //css-tricks.com
Редакция: Команда webformyself.
