10 Awesome PostCSS-plugins til at gøre dig til en CSS-guiden

PostCSS er et utroligt alsidigt værktøj, der gør det muligt at transformer CSS-stilarter med JavaScript-plugins. Dens fleksibilitet ligger i den måde, den er bygget på.

Den centrale del af PostCSS er et Node.js modul, som du kan installere med npm, og det har et økosystem med mere end 200 plugins, du kan vælge at bruge i dit projekt.

PostCSS er hverken en præprocessor eller postprocessor, da forskellige PostCSS-plugins kan falde ind i en af disse kategorier eller begge dele. det afhænger helt af dig, hvad du gør af det. Med PostCSS, du behøver ikke at lære en anden syntaks som i tilfældet med Sass eller LESS; du kan straks begynde at bruge den.

PostCSS tager din eksisterende CSS-fil og ændrer den til JavaScript-læsbare data, så JavaScript-plugins udfører ændringerne, og PostCSS returnerer den ændrede version af den oprindelige fil. Lyder køligt, gør det ikke?

I dette indlæg vil vi se på 10 PostCSS plugins til give dig et indblik i nogle af de store ting, du kan opnå med dette fantastiske værktøj.

1. Autoprefixer

Autoprefixer er nok den mest kendte PostCss-plugin, da den bruges af bemærkelsesværdige tekniske virksomheder som Google, Twitter og Shopify. Det tilføjer sælgerpræfikser til CSS-regler, hvor det er nødvendigt.

Autoprefixer bruger data fra Kan jeg bruge. På denne måde bliver det ikke dateret, og kan altid anvende de nyeste regler. Du kan tjekke, hvordan det virker på sit interaktive demo-websted.

2. CSSnext

CSSnext er en CSS transpiler som giver dig mulighed for at bruge fremtidig CSS-syntaks på aktuelle websteder. W3C har mange nye CSS-regler, som i øjeblikket ikke implementeres af browsere, men kan give udviklere mulighed for at skrive mere sofistikeret CSS hurtigere og lettere. CSSnext er blevet lavet for at bygge bro over dette hul.

Det er værd at tage et kig på dets funktioner for at se, hvad du kan opnå med det, for eksempel kan du Brug brugerdefinerede medier forespørgsler, brugerdefinerede selektorer, farve modifikatorer, SVG filtre og nye pseudoclasses i dine designs.

3. PreCSS

PreCSS er et af PstCSS-plugins, der fungerer som en CSS preprocessor. Det gør det muligt at drage fordel af en Sass-lignende markup i dine sytlesheet filer.

Ved at introducere PreCSS i din workflow kan du bruge variabler, hvis ellers udsagn, til loops, mixins, @forlænge og @importere regler, nesting og mange andre nyttige funktioner i din CSS-kode. PreCSS Github dokumentation giver dig detaljerede instruktioner om, hvordan du får mest ud af det.

4. StyleLint

StyleLint er en moderne CSS linter der korrektur og validerer din CSS-kode. Det gør det nemt at undgå fejl og presser dig til at følge konsekvente kodningskonventioner.

StyleLint forstår den nyeste CSS-syntaks, så den kan bruges sammen med det tidligere nævnte PreCSS-plugin. Det giver dig også mulighed for at lave din egen konfiguration, og kontrollerer endda, om dine indstillinger er gyldige.

5. PostCSS-aktiver

PostCSS Assets plugin er en praktisk aktiv manager for dine CSS-filer. Det kan være et godt valg, hvis du har problemer med URL-stier, da PostCSS-aktiver isolerer dine stylesheet-filer fra miljøændringer.

Du skal definere belastningsveje, relative stier og en basisvej, og plugin'et vil automatisk se de aktiver, du har brug for. For eksempel kan du skrive følgende kode, hvis du har brug for den rigtige URL til foobar.jpg billede:

 body background: resolve ('foobar.jpg');

PostCSS Aktiver også tager sig af aktiver cachen, som du kan indstille cachebuster variabel til sand, hvis du vil have URL-stier automatisk ændret, hvis et aktiv er ændret. Dette smarte plugin beregner også dimensionerne (bredde og højde) af billedfiler, eller endda ændrer dem ved hjælp af et forudindstillet forhold.

6. CSSNano

Hvis du har brug for optimerede og reducerede CSS-filer til et produktionssted, er det værd at tjekke ud CSSNano. Det er et modulært plugin, der består af mange mindre, enkeltansvarlige PostCSS-plugins. Det udfører ikke kun grundlæggende miniteknikker, som f.eks. Fjernelse af hvide rum, men har også avancerede muligheder, der muliggør fokuserede optimeringer.

Blandt mange andre funktioner er CSSNano i stand til at genoprette z-indeksværdier, reducere brugerdefinerede identifikatorer, konvertere længde-, tids- og farveværdier og fjerne forældede sælgerpræfikser.

7. Font Magician

Hvis du er fan af sofistikeret typografi, vil du helt sikkert lide Font Magician PostCSS-plugin. Magic magikerens magi afhænger i sin evne til automatisk generering af alle nødvendige @ Font-face regler.

Hvordan det virker, er ret ligetil, du behøver kun at tilføje font-family: "My Fav Font"; CSS-regel til et HTML-element, og font-magiker gør resten af arbejdet. Det kan tilføje Google Fonts, den lokale kopi af en skrifttype, Bootstrap typografi, og kan også indlæse skrifttyper asynkront. Her er dens interaktive demo site.

8. Skriv SVG

Har du nogensinde spekuleret på, hvor cool det ville være at skrive SVG lige ind i dine CSS-filer? Ved hjælp af Write SVG PostCSS plugin kan du nemt nå dette mål.

Dette praktiske plugin gør det f.eks. Muligt at gem dine SVG-baggrunde og ikoner i din CSS-fil, og senere Tilføj dem til det relevante HTML-element på følgende måde:

 @svg square @rect fill: var (- farve, sort); bredde: 100%; højde: 100%;  .eksempel baggrund: hvid svg (kvadrat param (- farve # 00b1ff)) dækning;

9. Lost Grid

Tapt Gitter er et godt PostCSS-plugin, der giver dig en imponerende CSS gitter system det gør ikke kun arbejder med almindeligt CSS men også med præprocessor sprog (Sass, LESS, Stylus). Det bruger calc () CSS-funktion til at skabe smukke grids, som du nemt kan bruge uden at bruge for meget tid med tilpasning.

Lost Grid har temmelig meget enkle regler, for eksempel at definere en kolonne med 25% bredde tager ikke mere end denne lille kodestykke:

 div lost-column: 1/4;

10. PostCSS Sprites

Det PostCSS Sprite plugin gør det nemt at generere image sprites, dvs. samlinger af billeder, der er anbragt i en enkelt fil. Efter at have indstillet et par valgmuligheder, tager plugin billederne fra din stilarkfil, fusionerer dem i en sprite og opdaterer derefter billedreferencerne, hvor det er nødvendigt.

Du kan bruge forskellige filtre og gruppere til at bestemme hvilke billeder du vil lægge i sprite, og du kan også indstille dimensionerne på outputbilledet..