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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

Код выше выведет следующий CSS:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Вот пен, который демонстрирует, как все работает. Вы можете изменить размер демо-версии, чтобы увидеть масштабирование в действии.

Более глубокий взгляд на то, как RFS анализирует CSS

Плагин ищет все вхождения функции rfs() в значениях объявлений и заменяет функцию текучим значением, используя функцию calc(). После каждого правила RFS генерирует медиа-запрос с дополнительным CSS, который не позволяет значениям становиться слишком большими.

RFS конвертирует только значения px и rem; все остальные значения (например, em, числа или цвета) будут игнорироваться. Функцию также можно использовать несколько раз в объявлении, например:

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

Эти переменные могут быть использованы в CSS позже.

Надеюсь, вы найдете эти обновления полезными в своей работе.

Автор: Martijn Cuppens

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий