10 Страхотен PostCSS Plugins да ви направи CSS съветника
PostCSS е изключително гъвкав инструмент, който прави възможно преобразувайте CSS стиловете с приставки за JavaScript. Гъвкавостта му е в начина, по който е построен.
Основната част на PostCSS е модул Node.js, който можете да инсталирате с npm, и има екосистема от повече от 200 плъгина, които можете да изберете да използвате във вашия проект..
PostCSS не е нито препроцесор, нито постпроцесор, тъй като различни PostCSS плъгини могат да попаднат в някоя от тези категории, или и двете; това зависи изцяло от вас какво правите от него. С PostCSS, вие не е необходимо да научите друг синтаксис подобно на Sass или LESS; можете веднага да започнете да го използвате.
PostCSS поема съществуващия ви CSS файл и я превръща в четливи за JavaScript данни, след това плъгините на JavaScript изпълняват модификациите и PostCSS връща променената версия на оригиналния файл. Звучи страхотно, нали??
В този пост ще разгледаме 10 PostCSS плъгина ще ви даде представа за някои от великите неща, които можете да постигнете с този страхотен инструмент.
1. Autoprefixer
Autoprefixer е може би най-известният плъгин PostCss, тъй като се използва от известни технологични компании като Google, Twitter и Shopify. То добавя префикси на доставчици към правилата на CSS, където е необходимо.
Autoprefixer използва данни от Can I Use. По този начин тя не се датира и винаги може да приложи най-новите правила. Можете да проверите как работи на интерактивния си демонстрационен сайт.
2. CSSслед
CSSnext е CSS transpiler, че ви позволява да използвате бъдещия синтаксис на CSS на текущите сайтове. W3C има много нови CSS правила, които в момента не се изпълняват от браузърите, но биха позволили на разработчиците да пишат по-сложни CSS по-бързо и по-лесно. CSS е създаден, за да преодолее тази празнина.
Струва си да погледнете характеристиките му, за да видите какво можете да постигнете с него, например можете използвайте потребителски медийни заявки, потребителски селектори, модификатори на цветовете, SVG филтри и нови псевдокласи във вашите проекти.
3. PreCSS
PreCSS е един от плъгините PstCSS, които работят като CSS препроцесор. Това прави възможно Възползвайте се от Sass-подобна маркировка във файловете на систетната си карта.
Чрез въвеждане на PreCSS в работния процес можете да използвате променливи, ако-друго изявления, за примки, миксини, @разшири и @import правила, гнездене и много други удобни функции във вашия CSS код. Документацията на PreCSS Github ви дава подробни инструкции как да се възползвате максимално от нея.
4. StyleLint
StyleLint е модерен CSS линт proofreads и валидира вашия CSS код. Това улеснява избягването на грешки и ви принуждава да следвате последователни правила за кодиране.
StyleLint разбира най-новия синтаксис на CSS, така че може да се използва заедно с вече споменатия плъгин PreCSS. Той също така ви позволява да направите своя собствена конфигурация и дори да проверите дали вашите настройки са валидни.
5. PostCSS Активи
Приставката PostCSS Assets е удобна управител на активи за вашите CSS файлове. Може да бъде чудесен избор, ако имате проблеми с URL пътищата, тъй като PostCSS Активи изолират файловете от стилове от промени в околната среда.
Трябва да определите пътеки за натоварване, относителни пътеки и основен път, а приставката автоматично ще търси необходимите ви активи. Например можете да напишете следния код, ако имате нужда от правилния URL адрес на foobar.jpg изображение:
body фон: разреши ('foobar.jpg'); Активи от PostCSS също се грижи за кеша на активите, както можете да зададете CACHEBUSTER променлива в true, ако искате URL пътищата да се променят автоматично в случай на промяна на актив. Този интелигентен плъгин също изчислява размерите (ширина и височина) на файловете с изображения или дори ги преоразмерява, използвайки предварително зададено съотношение.
6. CSSNano
Ако се нуждаете от оптимизирани и охарактеризирани CSS файлове за производствения сайт, си струва да ги проверите CSSNano. Това е модулен плъгин, който се състои от много по-малки, с една отговорност PostCSS плъгини. Той не само изпълнява основни техники за минимизиране, като премахване на интервали, но също така разполага и с разширени опции, които правят фокусираните оптимизации възможни.
Сред много други функции, CSSNano е в състояние да презаписва стойностите на z-индекса, намалявайки потребителските идентификатори, конвертирайки стойности за дължина, време и цвят и премахвайки остарели префикси на доставчици..
7. Шрифт Магьосник
Ако сте фен на сложна типография, със сигурност ще ви хареса Шрифт Маг PostCSS плъгин. Магията на шрифта Магьосник разчита на нейната способност автоматично генериране на всички необходими @ Шрифт лице правилник.
Начинът, по който работи, е доста ясен, само трябва да добавите семейство на шрифта: "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 (- цвят # 00b1ff)) корица;
9. Загубена мрежа
Загубена мрежа е страхотен PostCSS плъгин, който ви предоставя впечатляващо CSS мрежова система това не само работи с обикновен CSS но и с езици на препроцесор (Sass, LESS, Stylus). Той използва изчислено () CSS функцията за създаване на красиви решетки, които можете лесно да използвате, без да харчите твърде много време за персонализиране.
Lost Grid има доста ясни правила, например определянето на колона с 25% ширина не отнема повече от този малък кодов фрагмент:
div загубена колона: 1/4;
10. ПостЦПС Sprites
Най- PostCSS Sprite плъгинът го прави лесен генериране на спрайтове за изображения, колекции от изображения, поставени в един файл. След като зададете няколко опции, плъгинът взема изображенията от вашия файл със стилове, слива ги в спрайт, след това актуализира препратките на изображенията, където и да е необходимо.
Можете да използвате различни филтри и групиращи елементи, за да определите кои изображения искате да поставите в спрайт и можете да зададете и размерите на изходното изображение..
