10 великолепных плагинов PostCSS, которые сделают вас мастером CSS
PostCSS - невероятно универсальный инструмент, который позволяет преобразовать стили CSS с помощью плагинов JavaScript. Его гибкость заключается в том, как он построен.
Основной частью PostCSS является модуль Node.js, который вы можете установить с помощью npm, и он имеет экосистему из более чем 200 плагинов, которые вы можете использовать в своем проекте..
PostCSS не является ни препроцессором, ни постпроцессором, поскольку различные плагины PostCSS могут попадать в одну из этих категорий или в обе; это полностью зависит от вас, что вы делаете из этого. С PostCSS вы не нужно изучать другой синтаксис как в случае Sass или LESS; Вы можете сразу начать использовать его.
PostCSS берет ваш существующий файл CSS и превращает его в данные, читаемые JavaScript, затем плагины JavaScript выполняют модификации, а PostCSS возвращает измененную версию исходного файла. Звучит круто, не правда ли?
В этом посте мы рассмотрим 10 плагинов PostCSS для дать вам представление о некоторых великих вещах, которые вы можете достичь с этим удивительным инструментом.
1. Авторефиксатор
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 в ваш рабочий процесс, вы можете использовать переменные, если еще заявления, за петли, миксины, @extend а также @Импортировать правила, вложение и многие другие удобные функции в вашем коде CSS. Документация PreCSS Github дает вам подробные инструкции о том, как максимально использовать его.
4. StyleLint
StyleLint это современный CSS линтер, который вычитывает и проверяет ваш код CSS. Это позволяет легко избежать ошибок и подталкивает вас к соблюдению согласованных правил кодирования.
StyleLint понимает последний синтаксис CSS, поэтому его можно использовать вместе с ранее упомянутым плагином PreCSS. Это также позволяет вам сделать свою собственную конфигурацию и даже проверить, действительны ли ваши настройки.
5. Активы PostCSS
Плагин PostCSS Assets является удобным менеджер активов для ваших файлов CSS. Это может быть отличным выбором, если у вас есть проблемы с путями URL, так как PostCSS Assets изолирует ваши файлы таблиц стилей от изменений среды.
Вам нужно определить пути загрузки, относительные пути и базовый путь, и плагин автоматически найдет нужные вам ресурсы. Например, вы можете написать следующий код, если вам нужен правильный URL foobar.jpg образ:
body background: resol ('foobar.jpg'); PostCSS Активы также заботится о кеше активов, как вы можете установить CACHEBUSTER переменная в true, если вы хотите, чтобы URL-пути автоматически изменялись в случае изменения ресурса. Этот умный плагин также рассчитывает размеры (ширину и высоту) файлов изображений, или даже изменяет их размер, используя заданное соотношение.
6. CSSNano
Если вам нужны оптимизированные и минимизированные CSS-файлы для рабочего сайта, стоит проверить CSSNano. Это модульный плагин, который состоит из множества небольших плагинов PostCSS с одной ответственностью. Он не только выполняет основные методы минимизации, такие как удаление пробелов, но также имеет расширенные опции, которые делают возможной целевую оптимизацию.
Среди многих других функций CSSNano способен перебрасывать значения z-index, сокращать пользовательские идентификаторы, конвертировать значения длины, времени и цвета и удалять устаревшие префиксы поставщиков..
7. Шрифт Маг
Если вы поклонник сложной типографии, вам наверняка понравится Шрифт Маг PostCSS плагин. Магия Font Magician основана на его способности автоматически генерирует все необходимое @ Шрифт-лицо правила.
Как это работает, довольно просто, вам нужно только добавить семейство шрифтов: «Мой любимый шрифт»; Правило CSS для элемента HTML, а Font Magician выполняет всю остальную работу. Он может добавить Google Fonts, локальную копию шрифта, типографику Bootstrap, а также может загружать шрифты асинхронно. Вот его интерактивный демонстрационный сайт.
8. Напишите SVG
Вы когда-нибудь задумывались о том, как здорово было бы писать SVG прямо в ваши CSS-файлы? С помощью плагина Write SVG PostCSS вы легко сможете достичь этой цели..
Этот удобный плагин, например, позволяет храните фоновые изображения и иконки SVG в своем файле CSS, и позже добавить их в соответствующий элемент HTML следующим образом:
@svg square @rect fill: var (- color, black); ширина: 100%; высота: 100%; .example background: white svg (square param (- color # 00b1ff)) cover;
9. Потерянная Сетка
Потерянная Решетка отличный плагин PostCSS, который предоставляет вам впечатляющий CSS сетка это не только работает с простым CSS но и с препроцессорные языки (Sass, LESS, Stylus). Он использует Вычислено () Функция CSS для создания красивых сеток, которые вы можете легко использовать, не тратя слишком много времени на настройку.
В Lost Grid есть довольно простые правила, например, определение столбца с шириной 25% не займет больше, чем этот небольшой фрагмент кода:
div потерянный столбец: 1/4;
10. PostCSS Спрайты
PostCSS Sprite плагин позволяет легко генерировать спрайты изображений, то есть коллекции изображений, помещенные в один файл. После установки нескольких параметров плагин берет изображения из файла таблицы стилей, объединяет их в спрайт, а затем обновляет ссылки на изображения, где это необходимо..
Вы можете использовать различные фильтры и группировщики, чтобы определить, какие изображения вы хотите поместить в спрайт, а также можете установить размеры выходного изображения..
