10 потрясающих плагинов PostCSS, которые сделают вас мастером CSS

PostCSS это невероятно универсальный инструмент, который позволяет преобразовывать стили CSS с помощью плагинов JavaScript. Его гибкость заключается в том, как он построен.

Основная часть PostCSS является Модуль Node.js что вы можете установить с НПМи имеет экосистему из более чем 200 плагинов, которые вы можете использовать в своем проекте.

PostCSS не является ни препроцессором, ни постпроцессором, так как разные плагины PostCSS могут попадать в одну из этих категорий или в обе; это полностью зависит от вас, что вы делаете из этого. С PostCSS вам не нужно изучать другой синтаксис, как в случае пререкаться или МЕНЬШЕ; Вы можете сразу начать использовать его.

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

В этой статье мы рассмотрим 10 плагинов PostCSS, чтобы дать вам представление о некоторых замечательных вещах, которых вы можете достичь с помощью этого замечательного инструмента.
1. Autoprefixer
Autoprefixer, пожалуй, самый известный плагин PostCss, так как он используется известными техническими компаниями, такими как Google, Twitter и Shopify. Он добавляет префиксы вендоров в правила CSS там, где это необходимо.

Autoprefixer использует данные из Могу ли я использовать, Таким образом, он не устарел и всегда может применять самые последние правила. Вы можете проверить, как это работает на его интерактивный демонстрационный сайт,
2. CSSnext
CSSnext – это CSS-транспортер, который позволяет вам использовать будущий синтаксис CSS на текущих сайтах. В W3C есть много новых правил CSS, которые в настоящее время не реализованы браузерами, но могут позволить разработчикам писать более сложные CSS быстрее и проще. CSSnext был сделан, чтобы преодолеть этот разрыв.

Стоит взглянуть на его особенности чтобы увидеть, что вы можете сделать с помощью этого, например, вы можете использовать собственные медиа-запросы, пользовательские селекторы, модификаторы цвета, фильтры SVG и новые псевдоклассы в своих проектах.
3. PreCSS
PreCSS – это один из плагинов PstCSS, который работает как препроцессор CSS. Это позволяет использовать Sass-подобную разметку в ваших файлах sytlesheet.

Вводя PreCSS в ваш рабочий процесс, вы можете использовать переменные, операторы if-else, циклы, mixins, правила @extend и @import, вложение и многие другие удобные функции в своем коде CSS. PreCSS-х Github документация дает вам подробные инструкции о том, как максимально использовать его.
4. StyleLint
StyleLint – это современный CSS-линтер, который корректирует и проверяет ваш CSS-код. Это позволяет легко избежать ошибок и подталкивает вас к соблюдению согласованных правил кодирования.

StyleLint понимает последний синтаксис CSS, поэтому его можно использовать вместе с ранее упомянутым плагином PreCSS. Это также позволяет вам сделать свою собственную конфигурацию и даже проверить, действительны ли ваши настройки.
5. PostCSS Активы
Плагин PostCSS Assets – это удобный менеджер ресурсов для ваших CSS-файлов. Это может быть отличным выбором, если у вас есть проблемы с путями URL, так как PostCSS Assets изолирует ваши файлы стилей от изменений среды.

Вам нужно определить пути загрузки, относительные пути и базовый путь, и плагин автоматически найдет нужные вам ресурсы. Например, вы можете написать следующий код, если вам нужен правильный URL-адрес изображения foobar.jpg:

тело {
 background: resol (‘foobar.jpg’);
}
PostCSS Assets также заботится о кэше ресурсов, так как вы можете установить для переменной cachebuster значение true, если вы хотите, чтобы пути URL автоматически изменялись в случае изменения ресурса. Этот умный плагин также рассчитывает размеры (ширину и высоту) файлов изображений или даже изменяет их размер с использованием заданного соотношения.
6. CSSNano
Если вам нужны оптимизированные и минимизированные CSS-файлы для рабочего сайта, стоит проверить CSSNano. Это модульный плагин, который состоит из множества меньших плагинов PostCSS с одной ответственностью. Он не только выполняет базовые методы минимизации, такие как удаление пробелов, но также имеет расширенные опции, которые делают возможной целевую оптимизацию.

Среди многих других функций CSSNano способен перебрасывать значения z-index, сокращать пользовательские идентификаторы, преобразовывать значения длины, времени и цвета и удалять устаревшие префиксы поставщиков.
7. Шрифт Маг
Если вы являетесь поклонником сложной типографии, вам наверняка понравится плагин Font Magician PostCSS. Магия Font Magician заключается в его способности автоматически генерировать все необходимые правила @ font-face.

Как это работает, довольно просто, вам нужно только добавить семейство шрифтов: «My Fav Font»; Правило CSS для элемента HTML, а Font Magician выполняет всю остальную работу. Он может добавить Google Fonts, локальную копию шрифта, типографику Bootstrap, а также может загружать шрифты асинхронно. Вот его интерактивный демонстрационный сайт,
8. Написать SVG
Задумывались ли вы о том, как здорово было бы писать SVG прямо в ваши CSS-файлы? С помощью Написать SVG PostCSS плагин Вы можете легко достичь этой цели.

Этот удобный плагин, например, позволяет сохранять фоновые изображения и значки SVG в файле CSS, а затем добавлять их в соответствующий элемент HTML следующим образом:

@svg square {
 @rect {
  заполните: var (- цвет, черный);
  ширина: 100%;
  высота: 100%;
 }
}

.пример {
 фон: белый svg (квадратный параметр (- цвет # 00b1ff));
}
9. Потерянная Сетка
Lost Grid – отличный плагин PostCSS, который предоставляет вам впечатляющую систему CSS-грид, которая работает не только с простым CSS, но и с языками препроцессора (Sass, LESS, Stylus). Он использует CSS функцию calc () для создания красивые сетки что вы можете легко использовать, не тратя слишком много времени на настройку.

В Lost Grid есть довольно простые правила, например, для определения столбца с шириной 25% не требуется больше, чем этот небольшой фрагмент кода:

div {
 потерянный столбец: 1/4;
}
10. PostCSS Sprites
Плагин PostCSS Sprite позволяет легко создавать спрайты изображений, то есть коллекции изображений, помещенные в один файл. После установки нескольких параметров плагин берет изображения из файла таблицы стилей, объединяет их в спрайт, а затем обновляет ссылки на изображения, где это необходимо.

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