Share
Velkommen til "PostCSS Deep Dive: QuickStart Guide". Gjennom disse første innleggene i serien vår, ser vi på å komme i gang med PostCSS på de raskeste og mest effektive måtene.
I denne opplæringen skal vi starte med øyeblikkelige oppsettalternativer, slik at du kan jobbe med PostCSS på bare få minutter fra nå. I dag har vi to alternativer for umiddelbar oppsett: CodePen og Prepros.
La oss se hvordan du kan bruke dem begge til å begynne å spille med PostCSS med en gang.
Hvis du er helt ny i PostCSS, er den raskeste måten å begynne å bruke den via CodePen.
CodePen har nå forhåndsintegrert støtte for PostCSS, sammen med følgende plugins og pakker:
Dette valget av programtillegg gir deg støtte til fremtidig syntaks, Sass-lignende funksjonalitet, kommentarstripping, og evnen til å skrive transformasjonskode i stenografi.
Start med å gå til CodePen og opprett en ny penn. Deretter klikker du på det lille tannhjulikonet øverst til venstre i CSS-vinduet for å få opp innstillingspanelet.
Fra rullegardinmenyen merket CSS Preprocessor velg PostCSS alternativ. Du kan også sjekke radioknappen merket Autoprefixer å ha det pluginet inkludert.
Etter at du har valgt dette valget, bør du nå se en liten svart knapp under rullegardinmenyen Trenger et tillegg?. Klikk på den knappen og et panel åpnes og viser en liste over @ regler. Kopier og lim inn noen av disse @ Regler inn i CSS-panelet ditt for å begynne å bruke tilsvarende PostCSS-plugin.
La oss se et eksempel på hvordan vi kan bruke de tilgjengelige PostCSS-pluginene med CodePen, fra og med cssnext pakke.
Øverst på CSS-panelet legger du til denne koden for å spesifisere at du vil bruke cssnext:
@use cssnext;
Med denne linjen på plass, vil du nå kunne bruke all funksjonalitet som er beskrevet på http://cssnext.io/features. Vi skal bruke CSS-variabelen og fargefunksjonene for å sette en farge på kroppens bakgrunn.
Først setter vi opp en :rot delen og definere en CSS-variabel i den. Legg dette til CSS-panelet ditt:
: root --body_bg_color: black;
Nå kan vi bruke den variabelen i vårt CSS ved å legge til denne koden nedenfor:
kropp bakgrunn: var (- body_bg_color);
På dette tidspunktet burde du nettopp sett bakgrunnen av pennens sving. Du kan også klikke på Se kompilert knappen øverst på ditt CSS-panel for å se koden som er generert:
"Vis kompilert" viser kode etter behandling med PostCSSLa oss si at vi finner det svarte svarte litt for sterk for et design vi jobber med, og vi vil lette det litt. For å justere fargen kan vi bruke fremtidig syntaks som tillater fargemodifisering.
På linjen som erklærer --body_bg_color variabel, endre verdien fra svart til:
--body_bg_color: farge (svart lyshet (20%));
Denne fargefunksjonen lyser den svarte fargen med 20%. Du bør nå se at pennens bakgrunn har endret seg til et mørkegråt.
Noen av de støttede pluginene kan brukes på CodePen på samme måte:
Accentsconagua
@ regelen for plugin du vil brukeHer er den (visuelt unremarkable) demoen vi nettopp har bygget:
Prepros har kanskje ikke rekkevidden av plugin-støtte som CodePen har, men det inkluderer sømløs aktivering av begge Autoprefixer og cssnext. Prepros kan lastes ned fra https://prepros.io.
For å komme i gang drar du og slipper et prosjekt som inneholder en CSS-fil i grensesnittet. Klikk deretter på CSS-filens navn for å åpne et panel med innstillinger på høyre side. Herfra kan du merke av i boksene som er merket AutoPrefix CSS for å aktivere Autoprefixer, og Aktiver Cssnext For å kunne bruke cssnext:
Du kan nå bruke all funksjonaliteten til cssnext plugin-pakken, samt at du har CSS autoprefixed.
Ok, la oss raskt oppsummere hva vi har dekket over:
@ regler for å aktivere bestemte pluginsCodePen og Prepros er to gode måter å komme i gang med PostCSS nesten umiddelbart. Imidlertid er ulempen at du ikke får bestemme hvilke plugins å bruke.
Når du er klar til å ta imot full kraft av PostCSS, vil du velge og konfigurere ditt eget utvalg av plugins. Sannsynligvis den mest tilgjengelige måten å gjøre dette på er å sette opp egendefinerte PostCSS-prosjekter via oppgaveløpere som Gulp eller Grunt.
Du lærer hvordan du skal gå om det i de neste to veiledningene, "Hurtigstartsguide: Gulp Setup" og "Quickstart Guide: Grunt Setup".
