Så langt har vi brukt PostCSS til å gjøre ting som å optimalisere stilark, legge til funksjonalitet for forhåndsbehandling, og generere visse klasseklassifiseringskonvensjoner, men hvordan kan det bare være å skrive vanlig gammel CSS?
Det er så mange små biter av kode som den gjennomsnittlige webdesigneren skriver ut tusenvis av ganger gjennom løpet av karrieren, og hvis du bare kan få litt tid tilbake på hver, legger den til mye til slutt.
I denne opplæringen skal vi bruke PostCSS til å kutte ned på hver dags kode skrivingstid via en rekke snarveier og kortkommentillatelser. La oss begynne!
Konfigurer prosjektet ditt
Du er kjent med denne prosessen nå, men det første du må gjøre er å sette opp prosjektet ditt for å bruke enten Gulp eller Grunt. 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å samme mål, så du bør finne det litt enklere å jobbe med.
Du kan lese om hvordan du konfigurerer Gulp eller Grunt-prosjekter for PostCSS i de tidligere opplæringsprogrammene
PostCSS Quickstart Guide: Gulp Setup eller
PostCSS Quickstart Guide: Grunt Setup
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 på mappen npm installasjon.
Installer plugger
For denne opplæringen installerer vi flere plugins, hver med en annen type snarvei eller stenografi.
Enten du bruker Gulp eller Grunt, kjør følgende kommando inne i prosjektmappen din for å installere pluginene vi skal bruke:
Nå er vi klare til å laste inn pluginene i prosjektet ditt.
Legg inn plugins via Gulp
Hvis du bruker Gulp, legger du til disse variablene under variablene som allerede finnes i filen:
var alias = krever ('postcss-alias'); var crip = krever ('postcss-crip'); var magiker = krever ('postcss-font-magiker'); var trekant = krever ('postcss-triangle'); varcirkel = krever ('postcss-sirkel'); var linkColors = krever ('postcss-all-link-farger'); var senter = krever ('postcss-center'); var clearfix = krever ('postcss-clearfix'); var posisjon = krever ('postcss-posisjon'); var size = require ('postcss-size'); var verthorz = krever ('postcss-verthorz'); var colorShort = krever ('postcss-color-short');
Legg nå til hver av de nye variabelenavnene i din prosessorer matrise:
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.
Legg inn plugger via Grunt
Hvis du bruker Grunt, oppdaterer du prosessorer objekt, som er nestet under opsjoner objekt til følgende:
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.
Ok, nå er pluginene dine alle installert la oss lære hvordan du bruker dem til CSS-snarveier og kortskrift.
Bruk stenografi for egenskaper
Det er mange egenskaper vi må skrive om og om igjen og over igjen i CSS. Sikker på at tiden det tar å skrive en håndfull tegn en gang er svært liten, men over mange år med utvikling, legges alt sammen. Vi kommer til å se her på to plugins som gir deg mulighet til å trimme disse egenskapene ned til shorthand-versjoner, slik at du kan få en rask og jevn flyt som går som du hammer ut CSS.
Definer din egen stenografi
Postcss-alias plugin av Sean King lar deg definere din egen stenografi, eller "aliaser", for eventuelle egenskaper du vil forkorte. Dette gir deg en måte å sørge for at shorthand du bruker passer til måten ditt sinn fungerer på og dermed er lett for deg å huske.
For å definere noen aliaser legger du til en å-regel øverst på stilarket med syntaksen @alias .... Sett inn aliasene dine ved å legge til i regelen alias-navn: eiendom-navn;.
Legg til følgende eksempel i filen "src / style.css", som vil sette opp alias for border-størrelse, border-style og grensefarge eiendommer:
Les mer om postcss-alias på: https://github.com/seaneking/postcss-alias
Plug 'n' Play Shorthand
Hvis du vil bruke mange eiendomskorthandler, men du ikke ønsker å gå gjennom trinnene for å definere hver enkelt selv, kan du sjekke ut plugin-posten-crip av Johnie Hjelm som har hundrevis av forkortelser på eiendom klar for plugin og spille bruk.
For eksempel, legg til følgende kode i filen "src / style.css", som inneholder stenografi for margin-top, margin-right, margin-bottom og margin-left eiendommer:
Les mer om postcss-crip på: https://github.com/johnie/postcss-crip
Og se hele listen over eiendomsforkortelser på: https://github.com/johnie/crip-css-properties
Output @ font-face i One Line
Postcss-font-magiker plugin av Jonathan Neal lever veldig mye til navnet sitt. Det lar deg bruke egendefinerte skrifter via en enkel font-family regelen som om du brukte en standard skrifttype, og skrifttypen vil bare fungere som magisk.
Legg til følgende kode i filen "src / style.css":
kropp font-family: "Indie Flower";
Det er det. Det er alt som trengs for å gjøre bruk av postcss-font-magiker. Ingen spesiell syntaks, bare bruk skrifttypenavnet som du ville noe annet.
I dette tilfellet er Indie Flower-skrifttypen en som jeg har valgt fra Google Fonts-biblioteket. Jeg har ikke lagt til noen egendefinerte fontfiler til prosjektet mitt, så pluginet ser det og i stedet skal du sjekke for å se om den angitte fonten min er tilgjengelig fra Google Fonts. Når den finner ut at den er tilgjengelig, vil den skape det rette @ Font-face kode helt automatisk.
Kompil filen din så se på filen "dest / style.css", der du vil se denne koden er lagt til i:
@ font-face font-family: "Indie Flower"; font-style: normal; font-weight: 400; src: local ("Indie Flower"), lokal (IndieFlower), url (// fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6nZ2MAKAc2x4R1uOSeegc5U.eot?#) format ("eot"), url (// fonter. gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6ugdm0LZdjqr5-oayXSOefg.woff2) format ("woff2"), url (// fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6nhCUOGz7vYGh680lGh-uXM.woff) format ("woff" );
Du kan kontrollere at skrifttypen lastes inn riktig ved å opprette en ny fil i mappen "dest" med navnet "index.html" og legge til denne koden til den:
Test overskrift
Kjæresten er dum og sitter, og er en avgjørende forfatter. Pellentesque pretium bibendum nisl. Mauris eget orci eget nisi tristique lobortis. Pellentesque rutrum id ligula quis tempus. Vivamus tempus, bare på semper volutpat, lorem justo tincidunt urna, i mattis lorem dolor condimentum diam. Ut dapibus nunc auktor felis viverra posuere. Aenean effektivitet effektivitet. Vivamus leo felis, semper quis rutrum eu, eleifend eu quam.
For skrifttyper som skal lastes, må du se denne filen via en http: // adresse, snarere enn a fil:// adresse, så last opp filen til en webverten eller bruk en app som Prepros for å lage en live forhåndsvisning.
Du bør se Indie Flower-skrifttypen som er brukt på all tekst, slik som:
Les mer om postcss-font-magiker her: https://github.com/jonathantneal/postcss-font-magician
Lag CSS-former
Hvis du noen gang har brukt ren CSS til å lage former, vet du at det kan være en fin måte å inkludere ting som sirkler og trekanter i designene dine, men at det også kan være ganske vanskelig. Spesielt i tilfelle av trekanter, finne ut hvilken kode du trenger for å få en form orientert i riktig retning i riktig størrelse, kan føles noe mot intuitiv.
Det er der postkss-sirkelen og postcss-trekant-plugins av Jed Mao kommer til redning. Begge pluginene oppretter et forenklet syntaks, og en intuitiv måte å lage sirkler og trekanter med rent CSS på.
Legg til en sirkel
Hvis du vil opprette en sirkel, bruker du syntaksen sirkel: størrelse farge;. Legg til følgende kode i filen "src / style.css":
.sirkel sirkel: 8rem # c00;
Kompilere det og du vil se følgende kode lagt til din "dest / style.css" -fil:
Legg nå denne HTML-filen til filen "dest / index.html" du opprettet i det siste avsnittet:
Ta en frisk titt på filen din i en nettleser, og du bør nå se en rød sirkel:
Les mer om postcss-sirkel på: https://github.com/jedmao/postcss-circle
Legg til en trekant
Det er tre typer trekant du kan legge til ved hjelp av dette pluginet; ensidige, høyre-isosceles og likeverdige. Hver har litt forskjellige sett med syntaks, som du kan lese om i sin helhet ved pluginets Github repo.
Vi vil gå gjennom å legge til en likestilt trekant, syntaksen som er:
For å se trekanten i filen "dest / index.html", legg til denne html:
Når du oppdaterer denne filen i nettleseren din, bør du nå se en rød trekant som peker mot høyre:
Les mer om postcss-trekant på: https://github.com/jedmao/postcss-triangle
Bruk snarveier for vanlige oppgaver
Angi Link Styling
Innstilling av farger for koblinger er en jobb som må gjøres i hvert prosjekt, og krever innstillingsstiler for standardkoblinger samt fire forskjellige koblingstilstander. Post-plugin-all-link-fargeplatsen av Jed Mao lar deg snarvei den prosessen, utskrift av fargene for alle koblingene dine samtidig.
Legg til følgende i "src / style.css":
en @ link-farger alle # 4D9ACC;
Kompilér deretter filen din, og du vil se at alle nødvendige koblingstilstander er satt:
Du har også muligheten til å generere en annen farge for en bestemt stat. Bare legg til noen krøllete braces på slutten av regelen, og inne i det bruker syntaksen tilstand: farge;.
Oppdater koden du nettopp lagt til i filen "src / style.css" til følgende:
en @ link-farger alle # 4D9ACC svever: # 5BB8F4;
Nå når du kompilerer, vil du se hoverstaten har en annen farge til resten av stilene:
Les mer om postcss-all-link-farger på: https://github.com/jedmao/postcss-all-link-colors
Senter vertikalt eller horisontalt
Sentrering, enten vertikalt eller horisontalt, er en av de oppgavene som er en evig torn i siden av CSS-utviklere. Jed Mao's postcss-center plugin gjør oppgaven enklere med introduksjonen av topp: senter; for vertikal sentrering, og venstre: senter; for horisontal sentrering.
Legg til denne koden i filen "src / style.css":
.sentrert top: center; venstre: senter;
Sett deretter sammen det, og du vil se følgende kode:
Merk: sentrering bruker absolutt posisjonering, så du må vikle dine sentrert elementer med en forelder som bruker relativ, absolutt eller fast posisjonering. Gitt absolutt posisjonerte elementer påvirker ikke foreldrenes høyde eller bredde, og du vil også sette høyden og bredden på det overordnede elementet som passer.
For eksempel, legg til venstre: senter; til .sirkel klassen du opprettet tidligere, slik at den vil være horisontalt sentrert:
.sirkel sirkel: 8rem # c00; venstre: senter;
Legg deretter til denne andre klassen for å fungere som et omslag rundt sirkelen, og gi den relative posisjonering og en høyde som samsvarer med sirkelen:
.circle_wrap posisjon: relative; høyde: 8rem;
Legg nå et element som bærer denne klassen som en wrapper rundt din eksisterende sirkel html:
Når du går tilbake og oppdaterer siden din, bør du se at sirkelen din er horisontalt sentrert:
Les mer om postcss-senter på: https://github.com/jedmao/postcss-center
Output Clearfix i en linje
I et hvilket som helst design som inkorporerer flyter, er det å skape en clearfix-klasse så praktisk at det handler om å være viktig. Sean Kings postcss-clearfix-plugin gjør det mulig å skape den clearfix-stylingen i en en linjejobb, ved å legge til fastsette som en mulig verdi som kan brukes med klar eiendom.
For en clearfix som vil fungere på IE8 + legger du til følgende i filen "src / style.css":
.clearfixed clear: fix;
Ved kompilering ser du at den har produsert følgende clearfix-kode, klar til bruk:
.clearfixed: etter content: "; display: table; clear: both;
Hvis du trenger en clearfix som vil fungere på IE6 +, bruk verdien fix-arven i stedet for vanlig fastsette, som så:
.clearfixed_legacy clear: fix-legacy;
Når denne koden er kompilert, vil du se at den inneholder et lite ekstra innhold som gjør det vennlig til eldre nettlesere:
.clearfixed_legacy: før, .clearfixed_legacy: etter content: "; display: table; .clearfixed_legacy: etter clear: both; .clearfixed_legacy zoom: 1;
Les mer om postcss-clearfix på: https://github.com/seaneking/postcss-clearfix
Still posisjonering i en linje
Når du vil bruke ikke standardposisjonering, dvs.. absolutte, fast eller slektning, du må skrive ut verdiene for elementets topp, Ikke sant, bunn og venstre posisjonering manuelt. Det er ingen stenografi som du kan bruke når du angir marginer eller polstring i en linje. Det vil si, til du installerer Sean Kings postcss-posisjon plugin.
Med dette pluginet, når du bruker stilling eiendom, etter å ha satt en verdi på absolutte / fast / slektning, du kan erklære topp, Ikke sant, bunn og venstre verdier i samme linje.
Legg til følgende eksempelkode i filen "src / style.css":
.absolutt posisjon: absolutt 1rem 1rem 0 0;
Etter samling vil du se at kortboken har samlet seg inn i de separate linjene du vanligvis må skrive ut manuelt.
Måten disse verdiene er deklarert, er med samme mønster som i margin eller padding shorthand, dvs. du kan også sette topp og bunn i den første verdien, deretter til høyre og venstre i den andre, eller du kan angi en verdi som gjelder for alle fire.
For eksempel, prøv følgende kode:
.fixed_two_values posisjon: fast 2rem 1rem; .relativ_one_value posisjon: relativ 3rem;
Les mer om postcss-posisjon på: https://github.com/seaneking/postcss-position
Sett bredde og høyde på en gang
Støtten til postcss-størrelse av Andrey Sitnik lar deg knase de ofte brukte bredde og høyde egenskaper ned til en enkelt størrelse eiendom. Du kan bruke den på to måter: å passere to verdier med den første vurderingen til bredden og den andre til høyden, eller bestå en verdi som skal brukes til både bredde og høyde.
Test dette ved å legge til følgende CSS i filen "src / style.css":
Les mer om postcss-størrelse på: https://github.com/postcss/postcss-size
Sett vertikalt og horisontalt mellomrom
Som en stor elsker av effektiv koding, når jeg skriver ut marginer og polstring, som ofte er like på to sider, har jeg ofte funnet meg selv at det var en snarvei for å erklære vertikal og horisontal avstand samtidig. Jeg skrev til og med et par preprocessor mixins for å gjøre nettopp det. Men jeg vil ikke trenge de mixins lenger takket være postcss-verthorz plugin av David Hemphill.
Med dette pluginet kan du bruke padding-vert eller margin-vert for å angi vertikal avstand, og padding-horz eller margin-horz å sette horisontal avstand. Legg til følgende eksempelkode i filen "src / style.css" for å se dette virke:
.avstand padding-vert: 1rem; margin-horz: 2rem;
Etter samling vil du se at disse reglene har blitt utvidet til full utfylling og marginaldeklarasjoner.
Du kan også snarvei disse egenskapene enda lenger ved å forkorte dem til to bokstaver. Eksempelkoden vi brukte ovenfor, kunne forkortes til følgende og utdataene ville være nøyaktig det samme:
.spacing_short pv: 1rem; mh: 2rem;
Les mer om postcss-verthorz på: https://github.com/davidhemphill/postcss-verthorz
Output Color Codes
Min favoritt standardfarge er # 232323 og jeg vet ikke om det bare er meg, men jeg blir lei av å hamre ut de samme to sifrene om og om igjen. Jeg ønsket ofte at det var en snarvei, ligner måten du kan trimme på # ffffff ned til #fff. Med Postcss-color-kort plugin av Andrey Polischuk, er det.
Når du bruker dette pluginet, vil du si at en siffersifret kode blir opprettet, for eksempel hvis du angir en tosifret fargekode. # 23 vil bli # 232323. Hvis du angir en sifferfargekode, vil den bli gjentatt til det er tre siffer, f.eks. #f vil bli #fff. Du kan til og med bruke den til å sette RGBA () farger, der det første sifferet du passerer, gjentas tre ganger, og det andre brukes som alfa-verdi, f.eks. rgba (0, 0,5) vil bli rgba (0, 0, 0, 0,5).
Legg til følgende i filen "src / style.css" for å prøve alt ovenfor:
Share
Accentsconagua
