10 чудових модулів PostCSS для створення CSS майстра
PostCSS є неймовірно універсальним інструментом, який дозволяє перетворити стилі CSS за допомогою плагінів JavaScript. Його гнучкість полягає в тому, як він побудований.
Основною частиною PostCSS є модуль Node.js, який можна встановити за допомогою npm, і він має екосистему з більш ніж 200 плагінів, які можна вибрати для використання в проекті.
PostCSS не є ні препроцесором, ні постпроцесором, оскільки різні плагіни PostCSS можуть потрапити в будь-яку з цих категорій або обидва з них; це повністю залежить від вас, що ви робите. З PostCSS, ви не потрібно вивчати інший синтаксис як у випадку Sass або LESS; Ви можете негайно почати використовувати його.
PostCSS приймає ваш існуючий CSS-файл і перетворює його на дані, що читаються за допомогою JavaScript, після чого модулі JavaScript виконують модифікації, а PostCSS повертає змінену версію вихідного файлу. Звучить здорово, чи не так?
У цьому пості ми розглянемо 10 додатків PostCSS дати вам уявлення про деякі великі речі, які ви можете досягти з цим дивним інструментом.
1. Автопрефикс
Автопереплет це, мабуть, найвідоміший плагін PostCss, оскільки його використовують відомі технологічні компанії, такі як Google, Twitter і Shopify. Це додає префікси постачальників до правил CSS, де це необхідно.
Autoprefixer використовує дані з Can I Use. Таким чином, він не датується, і завжди може застосовувати останні правила. Ви можете перевірити, як він працює на інтерактивному демо-сайті.
2. CSSнаступний
CSSнаступний це перетворювач CSS дозволяє використовувати майбутній синтаксис CSS на поточних сайтах. W3C має багато нових правил CSS, які в даний час не реалізовані браузерами, але дозволяють розробникам писати більш складні CSS швидше і простіше. Для подолання цього пробілу було зроблено CSS.
Варто подивитися на його особливості, щоб побачити, що ви можете зробити з ним, наприклад, ви можете використовуйте спеціальні запити мультимедійних даних, спеціальні селектори, модифікатори кольору, фільтри SVG і нові псевдокласи у ваших проектах.
3. PreCSS
PreCSS є одним з модулів PstCSS, які працюють як препроцесор CSS. Це дає можливість скористайтеся розміткою, подібною до Sass, у файлах вашої схеми.
Вводячи PreCSS у ваш робочий процес, ви можете використовувати змінні, if-else заяви, для петлі, суміші, @extend і @import правила, вкладання та багато інших зручних функцій у вашому коді CSS. Документація Github PreCSS надає детальну інформацію про те, як максимально використовувати її.
4. StyleLint
StyleLint це сучасний CSS linter перевіряє і перевіряє ваш код CSS. Це дозволяє легко уникнути помилок і штовхає вас дотримуватися послідовних умов кодування.
StyleLint розуміє останній синтаксис CSS, тому його можна використовувати разом з раніше згаданим модулем PreCSS. Вона також дозволяє створювати власну конфігурацію і навіть перевіряє, чи налаштування дійсні.
5. PostCSS Активи
Додаток PostCSS Assets є зручним менеджер активів для ваших файлів CSS. Це може бути чудовим вибором, якщо ви маєте проблеми з URL-адресами, оскільки PostCSS Assets ізолює файли стилів від змін навколишнього середовища.
Необхідно визначити шляхи завантаження, відносні шляхи та базовий шлях, а плагін автоматично шукатиме потрібні вам активи. Наприклад, ви можете написати наступний код, якщо вам потрібна відповідна URL-адреса foobar.jpg зображення:
тіло фон: вирішення ('foobar.jpg'); Активи PostCSS також піклується про кеш активів, як ви можете встановити cachebuster змінна в true, якщо ви хочете, щоб URL-адреси автоматично змінювалися, якщо об'єкт змінено. Цей розумний плагін також обчислює розміри (ширину і висоту) файлів зображень або навіть змінює їх розмір за допомогою заданого співвідношення.
6. CSSNano
Якщо вам потрібні оптимізовані та змінені файли CSS для виробничого сайту, варто перевірити CSSNano. Це модульний плагін, який складається з безлічі дрібних плагінів PostCSS. Вона не тільки виконує основні способи мінімізації, такі як видалення пробілів, але й має розширені параметри, які дозволяють оптимізувати фокусування.
Серед багатьох інших можливостей, CSSNano здатний переробити значення z-індексу, зменшити користувацькі ідентифікатори, конвертувати довжину, час і значення кольорів, а також видалити застарілі префікси постачальників.
7. Шрифт Чарівник
Якщо ви шанувальник витонченої типографіки, ви, безумовно, сподобається Шрифт Чарівник Плагін PostCSS. Магія шрифта Чарівника спирається на його здатність автоматично генерує все необхідне @ font-face правила.
Як це працює досить просто, вам потрібно лише додати сімейство шрифтів: "My Fav Font"; Правило CSS до елемента HTML, а шрифт Magician виконує всю роботу. Він може додавати шрифти Google, локальну копію шрифту, типографіку Bootstrap, а також може асинхронно завантажувати шрифти. Ось його інтерактивний демонстраційний сайт.
8. Напишіть SVG
Ви коли-небудь замислювалися про те, наскільки здорово було б написати SVG прямо у ваші CSS-файли? За допомогою плагіна Write SVG PostCSS можна легко досягти цієї мети.
Цей зручний плагін, наприклад, дає можливість зберігати тла та іконки SVG у файлі CSS, і пізніше додайте їх до відповідного елемента HTML наступним чином:
@svg square @rect fill: var (- колір, чорний); ширина: 100%; висота: 100%; .example фон: білий svg (квадратний param (- color # 00b1ff)) обкладинка;
9. Загублена сітка
Загублена сітка це великий плагін PostCSS, який надає вам вражаюче Система сітки CSS це не тільки працює з звичайним CSS але й з мови препроцесора (Sass, LESS, Stylus). Він використовує calc () Функція CSS для створення красивих сіток, які можна легко використовувати, не витрачаючи занадто багато часу на налаштування.
Загублена сітка має досить прості правила, наприклад, визначення стовпця з шириною 25% не займає більше, ніж цей невеликий фрагмент коду:
div lost-column: 1/4;
10. Пошти СРСР
The ПостССПС Спрайт плагін дозволяє легко генерувати зображення спрайтів, колекції зображень, розміщених в одному файлі. Після встановлення декількох параметрів плагін знімає зображення з файлу таблиці стилів, об'єднує їх у спрайт, а потім оновлює посилання на зображення, де це необхідно.
Ви можете використовувати різні фільтри і групувачі, щоб визначити, які зображення ви хочете помістити в спрайт, і ви також можете встановити розміри вихідного зображення, а також.
