10 Awesome PostCSS-plugins för att göra dig till en CSS-guide
PostCSS är ett otroligt mångsidigt verktyg som gör det möjligt att omvandla CSS-format med JavaScript-plugins. Dess flexibilitet ligger i det sätt den byggs på.
Kärndelen av PostCSS är en Node.js-modul som du kan installera med npm, och den har ett ekosystem med mer än 200 plugins som du kan välja att använda i ditt projekt.
PostCSS är varken en förbehandlare eller postprocessor, eftersom olika PostCSS-plugins kan falla i någon av dessa kategorier, eller båda av dem. Det beror helt på dig vad du gör av det. Med PostCSS, du behöver inte lära sig en annan syntax som i fallet med Sass eller LESS; du kan omedelbart börja använda den.
PostCSS tar din existerande CSS-fil och gör den till JavaScript-läsbar data, då JavaScript-pluginsna utför ändringarna, och PostCSS returnerar den ändrade versionen av originalfilen. Låter coolt, gör det inte?
I det här inlägget tar vi en titt på 10 PostCSS-plugins till ge dig en inblick i några av de stora sakerna du kan uppnå med detta fantastiska verktyg.
1. Autoprefixer
Autoprefixer är förmodligen det mest kända PostCss-pluginet, eftersom det används av anmärkningsvärda teknikföretag som Google, Twitter och Shopify. Det lägger till leverantörs prefix till CSS-regler där det är nödvändigt.
Autoprefixer använder data från Kan jag använda. På så vis blir det inte daterat och kan alltid tillämpa de senaste reglerna. Du kan kolla hur det fungerar på dess interaktiva demo-webbplats.
2. CSSnext
CSSnext är en CSS transpiler som låter dig använda framtida CSS-syntax på aktuella webbplatser. W3C har många nya CSS-regler som för närvarande inte implementeras av webbläsare, men kan göra det möjligt för utvecklare att skriva mer sofistikerad CSS snabbare och enklare. CSSnext har gjorts för att överbrygga detta gap.
Det är värt att ta en titt på dess funktioner för att se vad du kan åstadkomma med det, till exempel du kan använd anpassade mediafrågor, anpassade väljare, färgmodifierare, SVG-filter och nya pseudoklasser i dina mönster.
3. PreCSS
PreCSS är en av PstCSS-pluginsna som fungerar som en CSS preprocessor. Det gör det möjligt att dra nytta av en Sass-liknande markup i dina sytlesheet-filer.
Genom att införa PreCSS i ditt arbetsflöde kan du använda variabler, om annat uttalanden, för loopar, mixins, @förlänga och @importera regler, häckning och många andra praktiska funktioner i din CSS-kod. PreCSS Github dokumentation ger dig detaljerade instruktioner om hur du får ut det mesta av det.
4. StyleLint
StyleLint är en modern CSS-linter som korrektur och validerar din CSS-kod. Det gör det lätt att undvika fel och driver dig att följa konsekventa kodningskonventioner.
StyleLint förstår den senaste CSS-syntaxen, så den kan användas tillsammans med det tidigare nämnda PreCSS-plugin. Det låter dig också göra din egen konfiguration, och kontrollerar även om dina inställningar är giltiga.
5. PostCSS-tillgångar
PostCSS-tillgångens plugin är en praktisk asset manager för dina CSS-filer. Det kan vara ett bra val om du brukar ha problem med URL-banor, eftersom PostCSS-tillgångar isolerar dina stilarksfiler från miljöförändringar.
Du måste definiera belastningsvägar, relativa sökvägar och en basbana, och pluginfilen ser automatiskt upp de tillgångar du behöver. Till exempel kan du skriva följande kod om du behöver rätt URL för foobar.jpg bild:
kropp bakgrund: lösa ('foobar.jpg'); PostCSS-tillgångar också tar hand om tillgångens cache, som du kan ställa in uppdaterings variabel till true om du vill att URL-sökvägar ska ändras automatiskt om en tillgång ändras. Det här smarta pluginet beräknar också dimensionerna (bredd och höjd) av bildfiler, eller till och med ändrar dem med ett förinställt förhållande.
6. CSSNano
Om du behöver optimerade och minifierade CSS-filer för en produktionsplats är det värt att kolla in CSSNano. Det är ett modulärt plugin som består av många mindre PostCSS-plugins med ett ansvar. Det gör inte bara grundläggande minifieringstekniker som att ta bort vittor, men har också avancerade alternativ som möjliggör optimerade optimeringar.
Bland många andra funktioner kan CSSNano återställa z-indexvärden, reducera anpassade identifierare, konvertera längd, tid och färgvärden och ta bort föråldrade leverantörs prefix.
7. Font Magician
Om du är en fan av sofistikerad typografi, kommer du säkert att tycka om Font Magician PostCSS-plugin. Den magiska av Font Magician bygger på sin förmåga att genererar automatiskt alla nödvändiga @ Font-face regler.
Hur det fungerar är ganska enkelt, du behöver bara lägga till font-family: "My Fav Font"; CSS-regeln till ett HTML-element, och Font Magician gör resten av arbetet. Den kan lägga till Google-teckensnitt, den lokala kopian av ett teckensnitt, typsnittet Bootstrap, och kan också ladda teckensnitt asynkront. Här är dess interaktiva demo webbplats.
8. Skriv SVG
Har du någonsin undrat hur cool det skulle vara att skriva SVG direkt i dina CSS-filer? Med hjälp av Write SVG PostCSS-plugin kan du enkelt uppnå detta mål.
Denna praktiska plugin gör det till exempel möjligt att lagra dina SVG-bakgrunder och ikoner i din CSS-fil, och senare lägg till dem till relevant HTML-element på följande sätt:
@svg square @rect fill: var (- färg, svart); bredd: 100%; höjd: 100%; .exempel bakgrund: vit svg (kvadrat param (- färg # 00b1ff)) lock;
9. Lost Grid
Lost Grid är ett bra PostCSS-plugin som ger dig en imponerande CSS rutnät system det gör inte bara fungerar med vanlig CSS men också med preprocessor språk (Sass, LESS, Stylus). Det använder calc () CSS-funktionen för att skapa vackra galler som du enkelt kan använda utan att spendera för mycket tid med anpassning.
Lost Grid har ganska mycket enkla regler, till exempel att definiera en kolumn med 25% bredd tar inte mer än den här lilla kodsatsen:
div lost-column: 1/4;
10. PostCSS Sprites
De PostCSS Sprite plugin gör det enkelt att generera bild sprites, dvs samlingar av bilder placerade i en enda fil. Efter att ha ställt in några alternativ tar plugin bilderna från din stilarkfil, sammanfogar dem till en sprite och uppdaterar sedan bildreferenserna varhelst det är nödvändigt.
Du kan använda olika filter och grupperingar för att bestämma vilka bilder du vill lägga in i sprite, och du kan också ställa in dimensionerna för utdata bilden.
