Главная » Статьи » Использование функции PostCSS для автоматизации рабочего процесса

Использование функции PostCSS для автоматизации рабочего процесса

Использование функции PostCSS для автоматизации рабочего процесса

От автора: некоторое время назад вы, возможно, столкнулись со статьей о продвинутых приемах CSS, в которой я описал, как можно использовать миксины для автоматизации адаптивных размеров шрифтов с помощью RFS. В своей последней версии v9, RFS способен перемасштабировать любое значение для любого свойства CSS в единицах px или rem, такого как margin, padding, border-radius или даже box-shadow.

Сегодня мы сосредоточимся на реализации PostCSS. Первое, что нужно сделать, это установить RFS с помощью npm:

npm install rfs

Следующий шаг — добавить RFS в список плагинов PostCSS. Если вы используете файл postcss.config.js, вы можете добавить его в список других плагинов PostCSS (например, Autoprefixer):

module.exports = { plugins: [ require('rfs'), require('autoprefixer'), ]
}

После настройки вы сможете использовать функцию rfs() в любом месте в собственном CSS. Например, если вы хотите, чтобы размеры шрифтов были адаптивными:

.title { font-size: rfs(4rem);
}

… или используйте его с любым другим свойством:

.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:

.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, числа или цвета) будут игнорироваться. Функцию также можно использовать несколько раз в объявлении, например:

box-shadow: 0 rfs(2rem) rfs(1.5rem) rgba(0, 0, 255, .6)

RFS и пользовательские свойства

: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 позже.

.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

Источник: https://css-tricks.com

Редакция: Команда webformyself.