Hjemmeside » Coding » 10 Awesome PostCSS-plugins for å gjøre deg til en CSS-veiviser

    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.