PostCSS в CSS — вне Autoprefixer

PostCSS в CSS — вне Autoprefixer

От автора: могу поспорить, что когда вы думаете о PostCSS CSS, вам приходит на ум что-то типа…
Дни с момента выхода последнего JavaScript фреймворка. Регулярные обновления по поводу того, сколько дней прошло с момента выхода JavaScript фреймворка или библиотеки dayssincelastjavascriptframework.com. Но правда в том, что PostCSS существует практически так же долго, как и React!

Почему PostCSS?

Самый распространённый вид использования PostCSS – это полная интеграция с Autoprefixer (Просто один из многих PostCSS плагинов. Сам по себе не является библиотекой.)

Написать такую логику вне более традиционных SASS / LESS миксинов и автоматически сделать её частью приложения – это же гениально.

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

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

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

Это действительно круто звучит и остаётся основной причиной того, что этот плагин, по данным NPM, скачивается 11,103,982 раз в месяц.

Очевидно, что отрасль нуждается в идеях, которые предлагает PostCSS. Один лишь плагин PostCSS скачивают больше, чем самые популярные JavaScript фреймворки / библиотеки… Можете проверить эту информацию на NPM. PostCSS не связан с другими фреймворками / библиотеками. Это Front-End инструмент.

Babel для CSS

PostCSS с плагинами, или лучше сказать с набором плагинов, можно использовать точно так же, как мы используем Babel в JavaScript.

CSSnext – это набор плагинов, которые среди других элементов могут трансформировать пользовательские свойства CSS в те, которые могут интерпретировать браузеры. Альтернативой CSSnext (которая лучше поддерживается) является postcss-preset-env

Он, очевидно, не будет работать в большинстве браузеров, но с помощью PostCSS, его можно преобразовать.

PostCSS – это «всего лишь» парсер для CSS. Это значит, что с его API, он может сделать всё возможное. Stylelint основан на PostCSS! Ознакомьтесь с этим восхитительным инструментом CSS здесь.

В чём суть PostCSS?

Странно, но суть PostCSS заключается не в CSS, а в том, что JavaScript может сделать с CSS. Давайте сделаем простое преобразование единственного свойства display: flex в множественные определения для конкретного браузера.

В сущности, PostCSS воспринимает источник CSS (или SASS / LESS) как вводные данные, даёт вам возможность изменять их и выдаёт конечный результат. Проще некуда.

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

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

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

Больше подробностей по поводу PostCSS API можно узнать здесь. Но помните, что документация автоматически генерируются из JSdoc (Если кто-нибудь когда-нибудь спросит у вас, зачем вам использовать JSdocs, просто скажите ему — PostCSS API docs). Хоть они и познавательные, ИМХО лучше бы они были написаны вручную.

Тематическое оформление

Если для поддержки вашей темы требуются разные палитры, вместе с другими переменными, которые нужно адаптировать, например, размеры шрифтов, или радиус границ, или… Одним из самых лёгких способов добиться этого является раздельное отображение переменных, например, цветов, радиуса страниц… в файле темы.

Для этого сценария мы можем задать @import только для файла темы по умолчанию и переместить import в конкретный файл темы во время создания, посредством PostCSS. В результате этого мы сможем легко создать тематические наборы CSS и никогда не добавлять ссылки на них в базу кода SASS.

Где variables.scss имеют такой маппинг.

variables.blue.scss темы имеют различный маппинг.

Сам по себе SASS не поддерживает динамические импорты (импорты с переменными в их пути). Проблема #279 на Github SASS. Так что такие действия практически невозможны, если вы используете SASS. По крайней мере, без PostCSS…

PostCSS плагин для рерайта пути переменных в @importwww.npmjs.com

Этот маленький плагин является только одним примером креативного использования PostCSS. Как это работает?

Забавный факт

Autoprefixer, возможно, устареет…

Автор: Develoger

Источник: https://develoger.com/

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

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

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

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

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

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

Получить

Метки:

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

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree