Введение в PostCSS

Откройте для себя PostCSS, отличный инструмент, который поможет вам писать современный CSS. PostCSS - очень популярный инструмент, который позволяет разработчикам писать препроцессоры или постпроцессоры CSS.

Вступление

PostCSS - это инструмент, который позволяет разработчикам писать препроцессоры или постпроцессоры CSS, называемыйплагины. Существует огромное количество плагинов, которые предоставляют множество функций, и иногда термин «PostCSS» означает сам инструмент, а также экосистему плагинов.

Плагины PostCSS можно запускать из командной строки, но обычно они вызываются исполнителями задач во время сборки.

Архитектура на основе плагинов обеспечивает общую основу для всех необходимых вам операций, связанных с CSS.

Примечание: PostCSS, несмотря на название, не является постпроцессором CSS, но его можно использовать для их создания, а также для других вещей.

Почему это так популярно

PostCSS предоставляет несколько функций, которыезначительно улучшить свой CSS, и он действительно хорошо интегрируется с любым инструментом сборки по вашему выбору.

Установите PostCSS CLI

С помощьюПряжа:

yarn global add postcss-cli

или жеnpm:

npm install -g postcss-cli

Как только это будет сделано,postcssкоманда будет доступна в вашей командной строке.

Эта команда, например, запускает плагин autoprefixer для файлов CSS, содержащихся в папке css /, и сохраняет результат в файле main.css:

postcss --use autoprefixer -o main.css css/*.css

Больше информации о PostCSS CLI здесь:https://github.com/postcss/postcss-cli.

Самые популярные плагины PostCSS

PostCSS предоставляет общий интерфейс для нескольких отличных инструментов для обработки CSS.

Вот некоторые из самых популярных плагинов, чтобы получить обзор того, что можно делать с PostCSS.

Автоприставка

Автоприставкаанализирует ваш CSS и определяет, нужны ли некоторым правилам префикс поставщика.

Это происходит в соответствии сМогу ли я использоватьdata, поэтому вам не нужно беспокоиться о том, нужен ли префикс функции или если префиксы, которые вы используете, теперь не нужны, потому что они устарели.

Вы можете написать более чистый CSS.

Пример:

a {
    display: flex;
}

компилируется в

a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

cssnext

https://github.com/MoOx/postcss-cssnext

Этот плагин являетсяВавилонCSS, позволяет вам использовать современные функции CSS, в то же время заботясь о переносе их в CSS, более удобный для старых браузеров:

он добавляет префиксы с помощью Autoprefixer (поэтому, если вы используете это, не нужно использовать Autoprefixer напрямую)
это позволяет вам использоватьПеременные CSS
позволяет использовать вложение, как в Sass

игораздо больше!

Модули CSS

Модули PostCSSпозволяют использовать модули CSS.

Модули CSS не являются частью стандарта CSS, но представляют собой поэтапный процесс сборки с ограниченными селекторами.

csslint

Линтинг поможет вам написать правильный CSS и избежать ошибок и подводных камней. Встилинтплагин позволяет вам линтировать CSS во время сборки.

cssnano

cssnanoминимизирует ваш CSS и оптимизирует код, чтобы получить наименьшее количество кода в рабочей среде.

Другие полезные плагины

В репозитории PostCSS GitHub естьполный список доступных плагинов.

Некоторые из тех, что мне нравятся, включают:

LostGridэто сеточная система PostCSS
postcss-нахальныйпредоставляет Sass-подобные миксины
postcss-вложенныйпредоставляет возможность использовать вложенные правила Sass
postcss-вложенные-предки, ссылаться на любой селектор предка во вложенном CSS
postcss-simple-vars, используйте Sass-подобные переменные
PreCSSпредоставляет вам множество функций Sass, и это то, что наиболее близко к полной замене Sass

Чем он отличается от Sass?

Или любой другой препроцессор CSS?

Основное преимущество PostCSS перед препроцессорами CSS, такими как Sass или Less, - это возможность выбирать свой собственный путь и выбирать нужные вам функции, одновременно добавляя новые возможности. Sass или Less являются «фиксированными», вы получаете множество функций, которые можете или не можете использовать, и вы не можете их расширять.

Тот факт, что вы «выбираете свое собственное приключение», означает, что вы все равно можете использовать любой другой инструмент, который вам нравится, вместе с PostCSS. Вы все равно можете использовать Sass, если это то, что вы хотите, и использовать PostCSS для выполнения других вещей, которые Sass не может делать, например, автопрефикса или линтинга.

Вы можете написать свой собственный плагин PostCSS, чтобы делать все, что захотите.

Скачать мою бесплатнуюСправочник CSS