Share
Som du kommer att ha samlat från tidigare poster i denna serie handlar PostCSS om plugins. De plugin du väljer definierar helt din erfarenhet med PostCSS.
Med tanke på att de är så integrerade och grundläggande, innan vi fortsätter att faktiskt producera stilark via PostCSS, ska vi titta på hur du kan utforska PostCSS-plugins ekosystem. Genom detta får du också en bild av hur kraftfull PostCSS är, och hur den erbjuder funktionalitet som inte kan skapas lika med andra befintliga medel.
Vi täcker var du kan gå för att hålla flikar på de senaste och bästa pluginsna, kategorierna som dessa plugins faller in i och överväganden för hur du laddar alla dessa plugins till projekt på ett logiskt sätt.
När du börjar komma igång med PostCSS finns det tre platser som du vill hålla koll på för att hitta bra plugins.
Huvudsidan för PostCSS Github repo upprätthåller för närvarande en omfattande kategoriserad lista över plugins. Denna lista tenderar att bli uppdaterad ofta så det är en ganska pålitlig plats att gå och se vilka plugins som finns tillgängliga för olika utvecklingsaspekter.
https://github.com/postcss/postcss#pluginsEn relativt ny och mycket välkommen tillägg till PostCSS-världen är webbplatsen postcss.parts, som tillhandahåller en sökbar katalog av PostCSS-plugins.
http://postcss.partsJust nu ser PostCSS regelbundet ut nya och intressanta plugins. Ovanstående två platser markerar inte nya plugins, så du vet inte om det finns föremål du inte sett tidigare. Av den anledningen är det en bra idé att följa eller ofta besöka @PostCSS på Twitter.
https://twitter.com/postcssBredden av funktionalitet i plugins som kan fungera med PostCSS är enorm, så det är en bra idé att få en introduktion till den allmänna typer av plugins som du sannolikt kommer att stöta på innan du går in på att pröva någon av dem.
PostCSS grundläggande karaktär är att den erbjuder modulär CSS-bearbetning. Som sådan uppmuntras enskilda plugins att endast täcka en liten, tydligt definierad uppsättning funktionalitet. Megalitiska multifunktionspluggar som gör allt på en gång är avskräckta.
Med det sagt, ibland vill du ha en lång lista över funktionalitet i ett projekt, och du vill hellre inte behöva installera och konfigurera 20 olika plugins. Här kommer "packar" till spel. Packar samlar flera modulära plugins under ett tematiskt paraply, så att alla kan installeras och distribueras på en gång.
Till exempel kombinerar PreCSS-paketet nio separata PostCSS-plugins för att skapa Sass-liknande funktionalitet. Cssnano-paketet använder omkring tjugo PostCSS-plugins för att ge CSS-minifiering och optimering. Genom att använda dessa förpackningar sparar du själv att installera och ladda varje plugin manuellt.
Framtida CSS handlar om att låta dig skriva syntax som vi vet kommer upp i W3C-specifikationen, men kanske inte fullt ut stöds i webbläsare än.
Du kanske till exempel vill använda den kommande åtta eller fyrsiffriga hexidekala notationen för att skapa opaka färger. För att skapa en något transparent blå kan du använda en färgkod som # 0000ffcc, eller dess förkortade form # 00fc, och kör postcss-color-hex-alpha-plugin för att konvertera det till det brett stödda formatet rgba (0, 0, 100%, 0,8).
Den mest framträdande närvaron i PostCSS framtida CSS är cssnext-paketet, vilket ger en hel del spec-kompatibel framtida CSS till bordet. Men för närvarande utvecklaren Maxime Therouin tar packen genom en större övergång i hur den fungerar. Som sådan kommer vi att hålla eld på att ge dig en framtida CSS-handledning tills övergången är klar.
Där framtida CSS handlar om att göra morgondagens kodarbete i dagens webbläsare handlar det i huvudsak om att dagens kod fungerar i gårdagens webbläsare. I en perfekt värld skulle vi aldrig behöva tänka på gamla och föråldrade webbläsare, men verkligheten är att det fortfarande finns några projekt som stödjer äldre webbläsare är nödvändiga. Fallbacks-kategorin i PostCSS-plugins kan hjälpa till där det är fallet.
Alla dessa plugins kör handsfree, vilket innebär att du skriver din kod enligt gällande standarder, och pluginsna hittar kod som behöver äldre fallbacks och sätter dem automatiskt in efter behov.
Till exempel kan du ha platta färger tillagt som fallbacks för RGBA () färger med postcss-color-rgba-plugin, eller lägg till IE8-kompatibla fallbacks för opacitet via plug-in-opacitet plugin. Den mest kända för dessa plugins är Autoprefixer, som lägger till leverantörs prefix efter behov, baserat på data från CanIUse.com.
Du kommer lära dig mer om återhämtnings-plugins i den kommande "Tillsammans med webbläsarkompatibilitet" i denna serie.
Plugin för språktillägg lägger till funktionalitet för CSS som annars inte skulle vara där. Som jämförelse kan du överväga att de flesta förprocessorer helt och hållet består av språkförlängningar. Faktum är att användare av Sass, Stylus och LESS sannolikt kommer att känna sig riktigt hemma med många PostCSS-språkförlängningar, till exempel de som lägger till mixins, variabler, conditionals, loopar, häckning, förlängning och så vidare.
Eftersom PostCSS är helt flexibel men det finns också språkförlängningar som erbjuder funktionalitet som inte vanligtvis finns i preprocessorer. Till exempel lägger postcss-bem-plugin syntaxen specifikt för att skapa CSS som följer BEM / SUIT-metoden, (mer om det i en senare handledning). Pluggen för postcss-define-property kan du skapa egna anpassade egenskaper eller omdefiniera inhemska egenskaper. Och plug-in-plug-in kan du använda inte bara villkor, men mönster-matchande logik i din kod.
Med denna sort är alla indikationer att PostCSS kommer att mogna till den punkt där det kan ge mycket av den funktionalitet som många av oss söker efter i förprocessorer, men också en stor funktionalitet utöver det.
Många av de färgproppar som för närvarande finns tillgängliga för PostCSS handlar om att omvandla färger från ett format till ett annat, till exempel från # hex.a till RGBA (), HCl (H, C, L) till #rgb, eller pantone till #rgb. Dessutom hanterar några av de mest användbara plugins färgmanipulationen, som blandar två färger, eller skalar ljuset eller mörkret av dem.
En speciell favorit av mig tillåter dig att ta ditt befintliga färgschema och sedan utföra en version som det verkar för personer med specifika former av färgblindhet. Det finns inget som att uppleva något första hand för att hjälpa dig att mäta hur lättillgängligt dina mönster är.
Vi kommer att gå in mer i detalj på färg plugins i våra senare förbehandling, stenografi och "diverse godis" tutorials.
Denna kategori av plugins hanterar många optimeringsuppgifter, till exempel packning av Base64-data, generering av CSS-spritark och SVG-optimering. Du hittar också flera andra typer av bild- och teckensnittsverktyg, till exempel automatisk SVG-till-PNG-konvertering för IE8, automatisk webbphotoproduktion och inkludering för att stödja webbläsare, @ Font-face genvägar, retina genvägar och mer.
Upptäcka att rutnätverk kan skrivas i PostCSS, utan att behöva ladda förskrivna stylesheets eller använda preprocessor mixins, var det första som verkligen öppnade mina ögon om hur kraftfull PostCSS är. Jag hade tidigare funnit att PostCSS huvudsakligen handlade om att filtrera och ändra befintlig CSS, men gridsystem visar att det kan användas för att skapa hela bibliotek med externa format.
Det finns för närvarande tre nätverkssystem tillgängliga för PostCSS:
PostCSS optimerings plugins faller i två allmänna kategorier: minifiering och kodändring. Genom dessa plugins kan du utföra minifunktionsuppgifter som att avlägsna whitespace och kommentarer, och du kan också ha mer komplexa modifieringar gjorda som att kombinera matchande mediafrågor, inlining @importera stylesheets, optimera typsnitt vikter, tar bort tomma eller dubbla regler och så vidare.
Vi kommer att täcka mer om denna kategori av PostCSS-plugins i den kommande "För Minifiering och Optimering" -handledning.
Som förprocessor användare fann jag alltid att en av de största fördelarna var möjligheten att minska antalet koden som jag var tvungen att skriva igenom med hjälp av variabler och mixins. Genom PostCSS har jag upptäckt ännu mer omfattande sätt att göra kodskrivning effektivare via den långa listan med genvägar och stenografi plugins som är tillgängliga.
Du kan välja att använda stenografi för egenskaper, antingen genom att definiera din egen eller använda befintlig stenografi w istället för bredd, h istället för höjd och så vidare. Du kan skriva ut @ Font-face koda, omvandla kod, trianglar och cirklar i en rad vardera. Och du kan genväga alla typer av vanliga uppgifter, inklusive länk styling, centrering, clearfixing, positionering, dimensionering, avstånd och utmatning av färgkoder.
Vi kommer att gå in i dessa plugins i djupet i handledningen "Genvägar och stenografi".
PostCSS kan också användas för mer än att transformera CSS, det kan också användas för att ge feedback när du utvecklar din CSS. Några av de analys- och rapporteringspluggar som finns finns en linter för BEM / SUIT-kod, ett plugin för att ge dig en uppdelning av din kod via CSSstats, "DoIUse" för att låta dig veta hur din kod raderar med data från Kan jag använda, och en Modernizr filgenerator.
Det finns några bra PostCSS-plugins som inte passar in i en viss kategori, men är alltför bra för att passera. Till exempel har vi postcss-style-guide som automatiskt genererar en stilguide baserad på din CSS. Det finns också plugin rtlcss, som används av WordPress, vilket genererar en höger till vänsterversion av ditt stylesheet.
Vi täcker några av dessa stora plugins i handledningen "Miscellaneous Goodies".
Den "roliga" kategorin innehåller sådana pärlor som postcss-spiffing som låter dig använda UK stavning, till exempel Färg istället för Färg, och välanpassad syntax, såsom !snälla du istället för !Viktig.
Det är osannolikt att du ser någon av de här plugins som används i ett verkligt projekt, men en genuin fördel som de erbjuder är att fungera som lättförståeligt exempel för aspirerande plugin-utvecklare. Att vara ganska enkelt och kortfattat är de perfekta för att ta en titt inuti och se vad som är viktigt för hur PostCSS-plugins görs.
En av de viktigaste övervägandena du måste göra när du laddar upp arrayen av PostCSS-plugins är den ordning i vilken du kör dem. Du måste pausa och tänka igenom din lista och bestämma om en plugin kanske behöver springa efter en annan för att kunna göra vad du vill ha det.
Du kan till exempel använda ett plugin som postcss-simple-vars som lägger till stöd för variabler, och du kan använda den för att lagra en RGBA () värde som så:
/ * källkod * / $ färg: rgba (0, 0, 0, 0,5); .style background: $ color; / * kompilerar till: * / .style bakgrund: rgba (0, 0, 0, 0,5);
Du kanske också vill använda ett plugin som postcss-color-rgba-fallback för att lägga till en platt hexcode som en återgång, vilket ger dig:
/ * kompilerar till: * / .style background: # 000; bakgrund: rgba (0, 0, 0, 0,5);
I det här fallet måste du se till att du körde variabler plugin innan återgångspluggen.
Om du körde baksidan plugin först skulle det bara hitta bakgrund: $ color; i din CSS och inte vet att det fanns en RGBA () värde för att det ska fungera med.
Men genom att köra variablerna plugin först, när backning plugin körs kommer det att hitta bakgrund: rgba (0, 0, 0, 0,5); och fortsätt och lägg till i önskat fallback.
Belastningsordningen för plugins är något som kommer att ändras med varje uppsättning plugins, så du kan hitta att du bara behöver göra lite experiment ibland för att få allt att fungera bra tillsammans.
Sammanfattningsvis utforska PostCSS-plugins:
Vi har slutfört vår "Quick Start" -guide till PostCSS och vi är redo att hoppa in i praktiken och börja producera en viss CSS-kod.
I nästa handledning börjar vi med hur man använder PostCSS för att skapa kompatibel kod för korsläsare genom automatisk införande av leverantörs prefix och ett antal fallbacks för egenskaper med äldre webbläsare, i synnerhet IE8.
Vi ses i nästa handledning!
Accentsconagua