Share
I den siste opplæringen lærte du hvordan du bruker PostCSS for å gjøre stilarkene dine mer kryssre kompatible med nettleseren, spesielt når det gjelder problemer som oppstår som følge av støtte for eldre versjoner av IE.
I denne opplæringen skal vi lære hvordan du gjør stilarkene mer effektive og laster raskere, ved å bruke PostCSS til å utføre ulike minifiserings- og optimaliseringsoperasjoner.
Du lærer å:
Accentsconagua
@importere regelen, selv om noen av stilarkene dine kommer fra Bower-komponenter eller npm-moduler, slik at du trenger bare en enkelt http Be om å laste inn nettstedets CSS.La oss komme i gang!
Det 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å 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
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.
For denne opplæringen skal vi bruke to individuelle plugins, pluss en plugin-pakke. Installer dem ved å kjøre følgende kommando inne i prosjektmappen din:
npm installere postcss-import css-mqpacker cssnano - save-dev
Nå er plugins installert, la oss gå videre og laste dem inn i prosjektet ditt.
Hvis du bruker Gulp, legger du til disse variablene under variablene som allerede finnes i filen:
var atImport = krever ('postcss-import'); var mqpacker = krever ('css-mqpacker'); var cssnano = krever ('cssnano');Legg nå til hver av de nye variabelenavnene i din prosessorer matrise:
var prosessorer = [atImport, mqpacker, cssnano];
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 ('postcss-import') (), krever ('css-mqpacker') (), krever ('cssnano') ()]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.
Det har alle plugins installert og lastet, så la oss gå videre til å lære hvordan de skal brukes til minifisering og optimalisering.
I stedet for å laste inn flere stilark, er det mer effektivt når det er mulig å kombinere stilarkene dine i en.
For eksempel er bruk av Normalize.css svært vanlig, men hvis du laster den som et frittstående stilark før ditt hovedformatark, krever det flere http forespørsler, og dermed redusere belastningstiden.
Men hvis du bruker Postcss-Import-plugin av Maxime Thirouin, kan du kombinere Normalize.css til hovedformatarket ditt, ved bruk av @importere regelen, og gir deg samme CSS med bare en http be om.
La oss fortsette å gjøre dette nå, importere og deretter legge inn Normalize.css i prosjektets stilark. Start med å laste ned "normalize.css" i prosjektets "src" -mappe, fra https://necolas.github.io/normalize.css/
Øverst på filen "src / style.css" legger du til følgende linje:
@import 'normalize.css';
Som du allerede har postcss-import installert, er alt du trenger å gjøre. Det vil se @importere regelen og legg inn koden automatisk fra filen normalize.css i stilarket.
Kompilér filen, og når du ser på "dest / style.css" -filen din, bør du se hele innholdet i "normalize.css" deri:
/ *! normalize.css v3.0.2 | MIT-lisens | git.io/normalize * / html font-family: sans-serif; ...
Du kan bruke samme prosess for å kombinere så mange separate stilark som du trenger. Bare plass @importere linjer i filen "src / style.css", uansett hvor du vil at den innrammede koden skal settes inn.
En veldig nyttig funksjon av dette pluginet er evnen til automatisk å oppdage CSS-filer som er plassert i mappen "bower_components" eller "node_modules".
For eksempel, i stedet for å manuelt laste ned "normalize.css" som vi gjorde ovenfor, kan du i stedet bare kjøre kommandoen bower installer normalize.css - save i prosjektet ditt. Dette vil automatisk laste ned den siste "normalize.css" -filen i mappen "bower_components / normalize.css".
Merk: Hvis du ikke har Bower-oppsett på datamaskinen, lær deg hvordan.
Øverst på stilarket, kan du nå bruke denne linjen i stedet:
@import 'normalize.css / normalize.css';
Post-plug-import-pluginet vil se inne i mappen "bower_components" og finne "normalize.css", og fortsett deretter innline det som i forrige eksempel.
Den samme prosessen kan følges for alle stilark som er i mappen "node_modules", noe som betyr at du kan bruke enten Bower eller npm til å håndtere nedlastinger, avhengighetsstyring og oppdateringer. Når du bruker enten tjeneste, gir dette plugin deg en enkel måte å kombinere tredjeparts CSS-filer med i dine egne stilark.
Inlining importerte CSS-filer på denne måten er ikke bare en svært effektiv måte å kombinere filer fra forskjellige kilder, for eksempel Bower-komponenter, det gir deg også muligheten til å organisere prosjektet ditt i flere separate stilark.
For eksempel kan du opprette en fil for å kontrollere oppsettet ditt, og et annet for å kontrollere fargeskjemaet. Hvis du vil endre fargeskjemaet ditt, kan du følge en prosess som dette:
Du kan da gjenta denne prosessen så mange ganger du vil, noe som gjør det effektivt å lage flere fargeskjemaer for samme design.
Noen prosjekter bruker separate stilark for å gi flere fargeplaner som dette, men i prosessen opprettholder avmatning fra lagt til http forespørsler. Med denne tilnærmingen ende du alltid med bare en http forespørsel, til tross for å ha mye frihet i det som kan inkluderes i ditt enkle stilark.
Les mer om postcss-import på: https://github.com/postcss/postcss-import
Css-mqpacker-pluginet av Kyo Nagashima vil finne matchende medieforespørsler i stilarket ditt og kombinere dem til en. Dette gjør at du kan organisere CSS-en slik du vil ha i utviklingsstilarkene dine, gjentatte medieforespørsler hvis du trenger det, uten å bekymre deg for eventuelle tap av effektivitet i produksjonsstiler.
La oss sette sammen et eksempel på bruksformålet hvor du kanskje vil gjenta mediaforespørsler, for eksempel hvis du organiserer designets layout og visualer separat. I et ekte prosjekt kan dette bety at du bruker helt separate filer, en for layout og en for visuelle, men for enkelhets skyld vil vi gjøre alt dette i vår "src / style.css" -fil.
Vi starter med litt layoutkode. Vi legger til en .kolonne klasse som vil gjøre to 50% Bredde kolonner sitte side ved side, som standard. Deretter bruker vi en medieforespørsel for å få dem stablet på hverandre i mindre størrelser. Legg til denne koden i stilarket ditt:
/ * LAYOUT * / .kolumn bredde: 50%; flyte: venstre; @media (maksimal bredde: 50rem) .column width: 100%; flyte: ingen;
Deretter legger vi til noen visuals for å sette en grå kant rundt våre kolonner. Den første kolonnen vil ha klassen .column_one og den andre vil ha klassen .column_two. Vi skal bruke samme medieforespørsel som vi gjorde med vårt oppsett for å endre hvordan vi bruker en grense til våre kolonner, avhengig av om de sitter ved siden av hverandre eller den ene på toppen av den andre.
Legg også denne koden til stilarket ditt også:
/ * VISUALS * / .column_one, .column_two border: 0.0625rem solid #ccc; .column_two border-left: 0; @media (maksimal bredde: 50rem) .column_one, .column_two border: 0.0625rem solid #ccc; .column_two border-top: 0;
Nå, kompilere filen "src / style.css" og ta en titt på det resulterende "dest / style.css" innholdet.
Som du kan se i koden nedenfor, har css-mqpacker-pluginet identifisert de to matchende medieforespørslene, og kombinert dem til en:
/ * LAYOUT * / .kolumn bredde: 50%; flyte: venstre; / * VISUALS * / .column_one, .column_two border: 0.0625rem solid #ccc; .column_two border-left: 0; @media (maksimal bredde: 50rem) .column width: 100%; flyte: ingen; .column_one, .column_two border: 0.0625rem solid #ccc; .column_two border-top: 0;
Merk: Koden ovenfor blir minifisert i filen "dest / style.css" på grunn av cssnano-plugin. For å se koden unminified, kommentere du midlertidig cssnano fra Gulpfile eller Gruntfile s prosessorer matrise.
Les mer om css-mqpacker på https://github.com/hail2u/node-css-mqpacker
For omfattende og mangesidig CSS-optimalisering er cssnano-pakken fra Ben Briggs et meget kraftig alternativ, men det er ganske mye plug-and-play. Det samler rundt tjuefem plugins, og kan utføre et imponerende antall forskjellige typer optimalisering.
Blant en lang liste over optimaliseringer kan den:
calc () brukVi skal behandle noen eksempler på kode i prosjektet som vil se alle de ovennevnte optimaliseringene som er brukt.
Legg til denne koden i filen "src / style.css":
.css_nano, .css_nano + p, [class * = "css_nano"], .css_nano / * Dette er et eksempel på cssnano i handling * / font-weight: normal; margin-topp: 1rem; margin-bunn: 2rem; margin-left: 1.5rem; margin-høyre: 2,5rem; font-weight: normal; polstring: 1,75rem; bredde: calc (50rem - (2 * 1,75rem)); en tekst-dekorasjon: ingen; font-weight: bold; p font-weight: bold;
Så kompilere filen din.
Merk: Du vil kanskje kommentere noen kode du allerede hadde, så du kan tydelig se resultatene.
I filen "dest / style.css" bør du nå se den optimaliserte koden:
.css_nano, .css_nano + p, [class * = css_nano] margin: 1rem 2.5rem 2rem 1.5rem; font-weight: 400; polstring: 1,75rem; bredde: 46,5rem en tekstdekorasjon: ingen a, p font-vekt: 700
Se gjennom listen over optimaliseringer som er nevnt i punktlisten ovenfor, og sammenlign deretter eksempelkoden før og etter samlingen for å se hvordan hver enkelt av disse endringene skjer:
font-weight: normal og font-weight: bold konverteres til font-weight: 400 og font-weight: 700 font-weight: normal; har blitt fjernet fra .css_nano stilcalc () Egenskapen er redusert til en statisk verdi.css_nano, .css_nano + p, [class * = "css_nano"], .css_nano har blitt minifisert til .css_nano, .css_nano + p, [klasse * = css_nano] margin-topp: 1rem; margin-bunn: 2rem; margin-left: 1.5rem; margin-høyre: 2,5rem; har blitt redusert til margin: 1rem 2.5rem 2rem 1.5rem; en og p stiler har blitt slått sammen for å dele sine felles font-weight: 700; innstillingFor en fullstendig liste over optimaliseringer gir cssnano sjekk ut: http://cssnano.co/optimisations/
Det er flere uavhengige plugins ansatt av cssnano-pakken, og du kan ønske å konfigurere innstillinger for eller deaktivere noen av dem.
Hvis du vil deaktivere et plugin, må du sende navnet sitt i alternativene dine for cssnano med innstillingen "false" brukt. Hvis du for eksempel ikke ønsker å optimalisere skriftvekter, angir du følgende i Gulpfile / Gruntfile:
// I Gulpfile-prosessorens array cssnano (minifyFontWeight: false) // I Gruntfile krever "prosessorer" -arrangement ('cssnano') (minifyFontWeight: false)Du kan følge samme tilnærming til å konfigurere alternativer for et plugin, og gi navnet på plugin-modulen først og deretter angi alternativer.
For eksempel kan du angi presisjonen, (antall desimaler), kalkpluggen skal bruke. Som standard kalk (100% / 2,76) ville gi deg 36,23188%. Men hvis du ønsket å trimme den presisjonen ned til to desimaler, kan du gjøre det slik:
// I Gulpfile-prosessorens array cssnano (calc: precision: 2) // I Gruntfile krever "prosessorer" array ('cssnano') (calc: precision: 2)Kalkverdien vil nå utgjøre til 36,23%.
For mer informasjon om cssnano opsjoner besøk: http://cssnano.co/options
La oss få en oversikt over hva vi dekket over:
I neste opplæring vil vi dykke inn i bruk av PostCSS for forhåndsbehandling via en utmerket plugin-pakke med navnet PreCSS. Denne pakken gir umiddelbar tilgang til Sass-lignende syntaks og funksjonalitet, med variabler, mixins, conditionals, strekker seg og mer.
Se deg i neste opplæring!
