10 Awesome PostCSS-plugins for å gjøre deg til en CSS-veiviser
PostCSS er et utrolig allsidig verktøy som gjør det mulig å forvandle CSS stiler med JavaScript plugins. Dens fleksibilitet ligger i måten den er bygget på.
Kjernen i PostCSS er en Node.js-modul som du kan installere med npm, og den har et økosystem med mer enn 200 plugins du kan velge å bruke i prosjektet.
PostCSS er verken en forprosessor eller en postprosessor, da forskjellige PostCSS-plugins kan falle inn i en av disse kategoriene, eller begge deler; Det avhenger helt av deg hva du gjør av det. Med PostCSS, du trenger ikke å lære en annen syntaks som i tilfelle av Sass eller mindre; Du kan umiddelbart begynne å bruke den.
PostCSS tar din eksisterende CSS-fil og endrer den til JavaScript-lesbare data, og JavaScript-pluginene utfører endringene, og PostCSS returnerer den endrede versjonen av den opprinnelige filen. Høres kult, gjør det ikke?
I dette innlegget vil vi se på 10 PostCSS plugins til gi deg et innblikk i noen av de store tingene du kan oppnå med dette fantastiske verktøyet.
1. Autoprefixer
Autoprefixer er trolig den mest kjente PostCss-plugin, som den brukes av bemerkelsesverdige tekniske selskaper som Google, Twitter og Shopify. Den legger til leverandør prefikser til CSS regler der det er nødvendig.
Autoprefixer bruker data fra Kan jeg bruke. På denne måten blir det ikke datert, og kan alltid gjelde de siste reglene. Du kan sjekke hvordan det fungerer på sitt interaktive demo-nettsted.
2. CSSnext
CSSnext er en CSS transpiler som lar deg bruke fremtidig CSS-syntaks på nåværende nettsteder. W3C har mange nye CSS-regler som ikke implementeres av nettlesere, men kan gjøre det mulig for utviklere å skrive mer sofistikert CSS raskere og enklere. CSSnext har blitt laget for å bygge bro over dette gapet.
Det er verdt å se på funksjonene for å se hva du kan gjøre med det, for eksempel du kan bruk tilpassede media spørringer, egendefinerte selektorer, fargemodifiseringer, SVG-filtre og nye pseudoklasser i designene dine.
3. PreCSS
PreCSS er en av PstCSS-pluginene som fungerer som en CSS preprocessor. Det gjør det mulig å dra nytte av en Sass-lignende markup i sytlesheet-filene dine.
Ved å introdusere PreCSS i arbeidsflyten din kan du bruke variabler, if-else
uttalelser, til
looper, mixins, @forlenge
og @importere
regler, nesting og mange andre nyttige funksjoner i CSS-koden din. PreCSSs Github-dokumentasjon gir deg detaljerte instruksjoner om hvordan du får mest mulig ut av det.
4. StyleLint
StyleLint er en moderne CSS linter som korrektur og validerer CSS-koden din. Det gjør det enkelt å unngå feil og presser deg til å følge konsekvente kodekonvensjoner.
StyleLint forstår den nyeste CSS-syntaksen, så den kan brukes sammen med det tidligere nevnte PreCSS-plugin. Det lar deg også lage din egen konfigurasjon, og kontrollerer selv om innstillingene dine er gyldige.
5. PostCSS-eiendeler
PostCSS Assets plugin er en praktisk aktivitetsbehandling for dine CSS-filer. Det kan være et godt valg hvis du har problemer med URL-baner, da PostCSS-aktiver isolerer stilarkfilene dine fra miljøendringer.
Du må definere belastningsbaner, relative baner og en grunnbane, og pluginet vil automatisk se opp de ressursene du trenger. For eksempel kan du skrive følgende kode hvis du trenger riktig URL til foobar.jpg
bilde:
kropp bakgrunn: løse ('foobar.jpg');
PostCSS eiendeler også tar vare på eiendomsbufferen, som du kan angi oppdaterings
variabel til ekte hvis du vil at URL-banene skal endres automatisk dersom en ressurs er endret. Denne smarte pluginen beregner også dimensjonene (bredde og høyde) av bildefiler, eller endrer størrelsen på dem med et forhåndsinnstilt forhold.
6. CSSNano
Hvis du trenger optimaliserte og minifiserte CSS-filer for et produksjonssted, er det verdt å sjekke ut CSSNano. Det er et modulært plugin som består av mange mindre, enkeltansvarlige PostCSS plugins. Det utfører ikke bare grunnleggende minifunksjonsteknikker som fjerning av hvite rom, men har også avanserte alternativer som gjør det mulig å gjøre fokuserte optimeringer.
Blant mange andre funksjoner kan CSSNano gjenopprette z-indeksverdier, redusere egendefinerte identifikatorer, konvertere lengde-, tids- og fargeværdier og fjerne utdaterte leverandørprefikser.
7. Font Magician
Hvis du er en fan av sofistikert typografi, vil du sikkert like Font Magician PostCSS-plugin. Den magiske Font-magiker er avhengig av sin evne til automatisk genererer alle nødvendige @ Font-face
regler.
Slik fungerer det ganske greit, du trenger bare å legge til font-family: "My Fav Font";
CSS-regel til et HTML-element, og Font Magician gjør resten av arbeidet. Det kan legge til Google Fonter, den lokale kopien av en skrift, Bootstrap-typografi, og kan også laste fonter asynkront. Her er det interaktive demo-nettstedet.
8. Skriv SVG
Har du noen gang lurt på hvor kult det ville være å skrive SVG rett inn i CSS-filene dine? Ved hjelp av Write SVG PostCSS plugin kan du enkelt nå dette målet.
Denne praktiske plugin, for eksempel, gjør det mulig å lagre SVG-bakgrunnene og ikonene i CSS-filen din, og senere legg dem til det relevante HTML-elementet på følgende måte:
@svg square @rect fill: var (- farge, svart); bredde: 100%; høyde: 100%; .eksempel bakgrunn: hvit svg (kvadrat param (-farge # 00b1ff)) deksel;
9. Lost Grid
Lost Grid er et flott PostCSS-plugin som gir deg en imponerende CSS grid system det gjør ikke bare Fungerer med vanlig CSS men også med preprosessor språk (Sass, LESS, Stylus). Den bruker calc ()
CSS-funksjonen for å lage vakre grid som du enkelt kan bruke uten å bruke for mye tid med tilpasning.
Lost Grid har ganske enkelt enkle regler, for eksempel å definere en kolonne med 25% bredde tar ikke mer enn denne lille kodestykket:
div lost-column: 1/4;
10. PostCSS Sprites
De PostCSS Sprite plugin gjør det enkelt å generere bilde sprites, dvs. samlinger av bilder plassert i en enkelt fil. Etter at du har satt inn noen alternativer, tar plugin bildene fra stilarkfilen din, fusjonerer dem til en sprite, og oppdaterer deretter bildene hvor det er nødvendig.
Du kan bruke forskjellige filtre og gruppere til å bestemme hvilke bilder du vil legge inn i sprite, og du kan også angi dimensjonene til utdatabildet.