Share
I de to siste opplæringene så vi på måter å bruke PreCSS på ferdige stilark for å forbedre kompatibiliteten og optimaliseringen av kryssbrowser, hovedsakelig som en post-prosessor. I denne opplæringen lærer du å bruke PostCSS som en pre-prosessor, på samme måte som du ville bruke Stylus, Sass eller LESS.
Det er to hovedmåter du kan gå om å bruke PostCSS til forhåndsbehandling. En er å velge alle dine egne plugins for å legge til preprosessorfunksjonaliteten du vil ha, og den andre er å installere en pakke med forhåndsvalgte plugins, slik at du er klar til å gå med en gang.
Vi starter med den raskeste og enkleste tilnærmingen, og installerer den utmerkede PreCSS-pakken med plugins, laget av Jonathan Neal. I opplæringen etter dette vil vi bevege deg på hvordan du kan sette sammen din egen preprosessor, bare ved hjelp av funksjonaliteten du vil ha.
Denne opplæringen vil anta at du har en viss grad av fortrolighet med funksjonene som ofte finnes i preprosessorer som Stylus, Sass eller LESS. Det er bare fordi vi skal fokusere på hvordan Du kan bruke disse samme typer funksjoner via PostCSS, i stedet for hva funksjonene gjør faktisk. Når det er sagt, selv om du aldri har brukt en preprosessor før, kan dette være det perfekte stedet å starte.
Vi går gjennom hvordan du konfigurerer et Gulp eller Grunt-prosjekt ved hjelp av PreCSS i neste avsnitt, men hvis du vil ta en snarvei (bare for nå), kan du alternativt bruke live demo lekeplassen for å prøve koden Vi løper gjennom i denne opplæringen. Koden kan skrives inn i det venstre vinduet, og det vil automatisk kompilere for deg og vise i det høyre vinduet.
PreCSS Live Editor: https://jonathantneal.github.io/precssDet første du må gjøre er å sette opp prosjektet ditt for å bruke enten Gulp eller Grunt, avhengig av dine preferanser. Hvis du ikke allerede har en preferanse for den ene eller den andre, anbefaler jeg at du bruker Gulp, da du trenger mindre kode for å oppnå de samme ender.
Du kan lese om hvordan du konfigurerer Gulp eller Grunt-prosjekter for PostCSS i de tidligere opplæringsprogrammene
henholdsvis.
Hvis du ikke vil opprette prosjektet manuelt fra starten, kan du laste ned kildefilene som er vedlagt denne opplæringen, og trekke ut enten det forsynte Gulp- eller Grunt-startprosjektet i en tom prosjektmappe.
Deretter kjører kommandoen med en terminal eller kommandoprompt i mappennpm installasjon.
Enten du bruker Gulp eller Grunt, installerer PreCSS i prosjektet ditt med kommandoen:
npm installere precss - save-dev
Hvis du bruker Gulp, legg til denne variabelen under variablene som allerede finnes i filen:
Accentsconagua
var precss = krever ('press');Legg nå det nye variabelenavnet i din prosessorer matrise:
var prosessorer = [press];
Gjør en rask test at alt fungerer ved å kjøre kommandoen gulp css og deretter sjekker du at en ny "style.css" -fil har dukket opp i prosjektets "dest" -mappe.
Hvis du bruker Grunt, oppdaterer du prosessorer objekt, som er nestet under opsjoner objekt til følgende:
prosessorer: [krever ('precss') ()]Gjør en rask test at alt fungerer ved å kjøre kommandoen grunt postcss og deretter sjekker du at en ny "style.css" -fil har dukket opp i prosjektets "dest" -mappe.
Du har nå alt du trenger for å bruke PreCSS installert og klar til å gå. Dette betyr at vi er klare til å begynne å tråkke gjennom noen av PreCSS pre-prosesseringsegenskapene og hvordan de kan brukes.
Generelt sett er PreCSS-syntaks mest lik Sass. Men det bruker noen av sine egne unike tilnærminger, som vi vil dekke når vi går.
Merk: På grunn av den Sass-lignende syntaxen til PreCSS, vil du oppdage at en Sass syntax høyttaler vil fungere best for deg i din favoritt tekstredigering.
Nesting er noe felles for alle tre av de store preprosessorer, det vil si Stylus, Sass og LESS, og det er også til stede i PreCSS. Nesting i PreCSS gjøres på samme måte som i Sass og LESS, ved å plassere selektorer inne i krøllespenningen til andre selektorer.
Evnen til å bruke & symbol for at foreldrevelgeren dupliseres i barvelgeren, fungerer også på samme måte i PreCSS som i andre preprosessorer.
Prøv å legge til følgende nestede kode i filen "src / style.css":
.meny bredde: 100%; en tekst-dekorasjon: ingen; & :: før innhold: ";
Kompilere CSS med gulp css eller grunt postcss og filen "dest / style.css" burde ha vurdert den nestede koden til følgende:
.meny bredde: 100%; .menu en tekst-dekorasjon: ingen; .menu :: før innhold: ";
Variabler er en annen type funksjonalitet som er felles for alle preprosessorer, og de er inkludert i PreCSS. Det eneste som vanligvis varierer mellom hver preprosessor, er syntaksen for å betegne variabler.
@ symbol og plasser a : før verdien. $ symbol og plasser en = signere før verdien. $ symbol og plasser a : før verdien.I tråd med PreCSS-tendensen til å bruke Sass som syntaks, plasserer den også a $ før variabelnavnet og a : før verdien.
Prøv å bruke PreCSS-variabler ved å legge dette til "src / style.css" -filen din:
$ text_color: # 232323; kropp farge: $ text_color;
Etter gjenkompilering bør du se denne resulterende koden:
kropp farge: # 232323;
Conditionals, dvs.. hvis og ellers logikk, er en funksjon som er veldig sterk i både Sass og Stylus. Mindre tilbyr bevoktet mixins, men de tilbyr ikke ganske like kraft. Conditionals er tilstede i PreCSS og følger samme syntaks som Sass, med @hvis og @ellers.
Legg til denne eksempelkoden til filen "src / style.css":
$ column_layout: 2; . kolonne @if $ column_layout == 2 bredde: 50%; flyte: venstre; @else bredde: 100%;
I eksemplet ovenfor har vi en .kolonne Klasseproduksjonen varierer forskjellig avhengig av om vi vil ha en en kolonneoppsett eller en to-kolonneoppsett. Vi har $ column_layout variabel satt til 2, noe som betyr at vi skal se bredde: 50%; flyte: venstre; utdata til vår klasse.
Kompil filen din, og du bør se følgende i filen "dest / style.css".
.kolonne bredde: 50%; flyte: venstre
Merk: Postcss-Advanced-variabelen plugin som gir denne betingelsen funksjonalitet er fortsatt ganske ny, og jeg har opplevd noen uventet produksjon når du bruker den til mer kompliserte conditionals, men jeg er sikker på at den vil bli oppdatert i nær fremtid.
Det er et alternativt plugin som kan brukes til conditionals som heter postcss-conditionals. Vi dekker hvordan du kan bruke det pluginet (hvis du velger) i neste opplæring, "Rolling Your Own Preprocessor".
@til og @Hver Det finnes to typer løkker tilgjengelig i PreCSS, the @til og @Hver sløyfer. Begge disse bruker en tilnærming som er akkurat som Sass. "For" sløyfer lar deg sykle gjennom en numerisk teller, mens "hver" sløyfer lar deg sykle gjennom en liste over elementer.
@til LoopsI en @til loop Det finnes en "counter" -variabel som holder styr på hvor du er i sykling gjennom talltelleren din, vanligvis sett som $ i. For eksempel, når iterating fra 1 til 3 vil det være tre sløyfer; I det første $ i vil være lik 1, den andre vil det være lik 2 og den tredje blir det lik 3.
Dette $ i Tellervariabel kan interpoleres til både selektorer og regler, noe som kan være veldig nyttig for ting som generering n'te-av-typen () regler og beregningsbredder.
Legg til denne koden i filen "src / style.css" for å prøve ut en @til løkke:
@for $ i fra 1 til 3 p: nth-of-type ($ i) margin-left: calc (100% / $ i);
Etter samling bør du se denne koden utvides til:
p: nth-of-type (1) margin-left: calc (100% / 1); p: nth-of-type (2) margin-left: calc (100% / 2); p: nth-of-type (3) margin-left: calc (100% / 3);
Merk: tall 1, 2 og 3 har blitt satt inn i hver av de ovennevnte stilene.
@Hver Loopsen @Hver loop sykler gjennom en liste over elementer i stedet for tall. Som med @til looper, variabelen som representerer løkkeens nåværende element, kan interpoleres til selektorer og regler. Merk at for å interpolere til en streng, må du sette inn et sett med parentes i variabelenavnet i formatet $ (Var).
Gi ved hjelp av PreCSS @Hver slår en tur ved å legge til følgende eksempelkode:
$ sosial: twitter, facebook, youtube; @each $ icon i ($ sosial) .icon - $ (ikon) bakgrunn: url ('img / $ (ikon) .png'); Etter samling bør du se at følgende CSS er generert:
.ikon-twitter bakgrunn: url ('img / twitter.png'); .icon-facebook bakgrunn: url ('img / facebook.png'); .icon-youtube bakgrunn: url ('img / youtube.png'); Syntaxen for mixin creation er et aspekt av PreCSS som er litt annerledes enn Sass.
I Sass, for å definere en mixin bruker du syntaksen @mixin mixin_name ($ arg1, $ arg2) ... og bruk den med @include mixin_name (pass_arg1, pass_arg2);.
I PreCSS, derimot, definerer du en mixin med syntaksen @ define-mixin mixin_name $ arg1, $ arg2 ... og bruk den med @mixin mixin_name pass_arg1, pass_arg2;.
Legg til dette eksemplet i filen "src / style.css":
@ define-mixin icon $ network, $ color . knapp. $ (nettverk) bakgrunnsbilde: url ('img / $ (nettverk) .png'); bakgrunnsfarge: $ color; @mixin ikon twitter, blå; @mixin ikon youtube, rødt;Ved kompilering bør du se:
.button.twitter bakgrunnsbilde: url ('img / twitter.png'); bakgrunnsfarge: blå; .button.youtube bakgrunnsbilde: url ('img / youtube.png'); bakgrunnsfarge: rød; Merk: Argumenter passert gjennom mixin kan interpoleres til selektorer og strenger med samme tilnærming som nevnt i @Hver løkker over; med formatet $ (Var).
I tillegg til å bruke mixins på den måten som er vist ovenfor, kan de også settes inn for å forbruke blokker av innhold som passeres når du ringer til mixin. Dette er i hovedsak samme prosess som med Sass ' @innhold.
For eksempel, endre mixin fra eksempelet ovenfor, plassering @ -Mixinen-innhold hvor du vil ha en bestått blokk av innhold som skal vises, slik som:
@ define-mixin icon $ network, $ color . knapp. $ (nettverk) bakgrunnsbilde: url ('img / $ (nettverk) .png'); bakgrunnsfarge: $ color; @ -Mixinen-innhold; Når en mixin innlemmer @ -Mixinen-innhold brukes, må den plasseres med krøllede parentes, i stedet for på en enkelt linje som slutter med a ;, eller det vil mislykkes i å kompilere.
Oppdater koden slik at samtalene dine ser slik ut:
@mixin ikon twitter, blå bredde: 3rem; @mixin ikon youtube, rød bredde: 4rem;
Etter samling, bør dette gi følgende kode - legg merke til inkluderingen av bredde innholdet gikk gjennom hver bruk av mixin:
.button.twitter bakgrunnsbilde: url ('img / twitter.png'); bakgrunnsfarge: blå; bredde: 3rem; .button.youtube bakgrunnsbilde: url ('img / youtube.png'); bakgrunnsfarge: rød; bredde: 4rem; Utvidelser ligner mixins på en måte, fordi de er utformet slik at du kan gjenbruke blokker med kode. Men ideen bak "strekker seg" er å lage et grunnsett med kode du vet at du skal bruke på samme måte flere ganger for en bestemt type element. Du kan deretter utvide på den basen med tilleggs-ikke-standardkode.
I PreCSS er syntaksen for å definere en utvidelse @ define-extend extend_name ....
I filen "src / style.css" definerer du en utvidelse som inneholder basisformatene for en avrundet knapp som slik:
@ define-extend rounded_button border-radius: 0.5rem; polstring: 1em; grensebredde: 0,0625rem; border-style: solid;
Dette standard settet med stiler er nå klart, blir utvidet med ekstra kode, for eksempel å sette ting som bakgrunnsfarge og grensefarge. Dette gjøres ved å bruke syntaksen @extend extend_name; for å importere basestiler definert i forlengelsen.
Legg til denne eksempelkoden, under koden du nettopp har lagt til:
.blue_button @extend rounded_button; border-farge: # 2F74D1; bakgrunnsfarge: # 3B8EFF; .red_button @extend rounded_button; border-farge: # C41A1E; bakgrunnsfarge: # FF2025;
Hvor i @extend rounded_button; linjen brukes, vil hele innholdet av forlengelsen bli satt inn.
Kompilere dine stiler, og du bør få:
.blue_button, .red_button border-radius: 0.5rem; polstring: 1em; grensebredde: 0,0625rem; border-style: solid; .blue_button border-color: # 2F74D1; bakgrunnsfarge: # 3B8EFF; .red_button border-color: # C41A1E; bakgrunnsfarge: # FF2025;
Legg også merke til at stilene som er felles for .blue_button og .red_button Klassen er kombinert for effektivitet.
Pluggen brukes til å legge inn stilark via @importere er det samme som vi dekket i den forrige opplæringen i denne serien: For Minifisering og Optimalisering. For en oversikt over hvordan det fungerer, hodet over og les av delen "Inline / Kombinere filer med @import".
I sammenheng med å bruke PostCSS som en forprosessor, blir importen enda mer nyttig, ettersom de gir deg muligheten til å sette opp deler, noe du kan være vant til fra andre forbehandlingsløsninger. For eksempel kan du sette opp en "partials" -mappe, skille prosjektet inn i logisk diskrete partielle filer og deretter importere dem slik:
@import "partials / _variables.css"; @import "partials / _utilities.css"; @import "partials / _mixins.css"; @import "partials / _extends.css";
Jeg håper du nå har noen innblikk i hvor kraftig PostCSS kan være som en preprosessor ved hjelp av PreCSS-pakken. For å oppsummere hva vi dekket over:
@ define-mixin mixin_name $ arg1, $ arg2 ... @mixin mixin_name pass_arg1, pass_arg2; @ -Mixinen-innhold kan brukes på samme måte som Sass ' @innhold @ define-extend extend_name ...@extend extend_name;@importere integrerer eksterne CSS-filer, spesielt nyttig for bruk av partialsPreCSS er et fantastisk prosjekt, som samler noen gode språkforlengelsesprogrammer og gjør PostCSS-basert preprocessing ganske mye plug and play. Det gir nesten all funksjonalitet de fleste preprosessorbrukere har kommet til å forvente, og er en rask, "ikke oppstyr" måte å få PostCSS preprocessor ballen til å rulle.
Bruk av PreCSS er en av de to metodene for PostCSS preprocessing vi nevnte ved starten av denne opplæringen. Den andre metoden er å sette opp din egen preprocessor, hånd plukker språkforlengelsesplugins som passer til dine egne prosjekter eller kodestiler. Avhandlingen er at det er litt mer oppsett, men i retur får du friheten til å sette sammen en preprosessor som fungerer men du vil at den skal.
Du lærer hvordan du gjør dette i neste opplæring, "Rull din egen preprosessor".
