Share
Hvis du er interessert i å bruke PostCSS, men du fortsatt elsker favorittpreprosessoren din, ikke bekymre deg. Du trenger ikke å velge mellom de to. Du kan bruke dem rett ved siden av hverandre.
Det er flere PostCSS-plugins som komplimenter forprosessorer veldig bra, da de legger til funksjonalitet i arbeidsflyten din som ellers ville være umulig, eller i alle fall vanskeligere, bare ved hjelp av en preprosessor.
Vi berører noen av disse gratis pluginene, så vi går gjennom oppsettguider for å vise deg hvordan du bruker PostCSS ved siden av Sass, Stylus eller LESS.
Før vi kommer inn hvordan Du kan bruke preprosessorer sammen med PostCSS, vi snakker litt om Hvorfor du ønsker å. Det korte svaret er: å få tilgang til PostCSS-plugins hvis funksjonalitet komplimenterer preprosessorer. For å vise deg hvorfor dette er verdt å ha, går vi over en håndfull plugins som fungerer veldig bra med preprosessorer.
Merk: Det kan være mulig å oppnå lignende sluttresultater ved å bruke mixins og funksjoner i vanlig preprosessorkode, men med hvert av eksemplene nedenfor behandles prosessen automatisk. Du skriver din CSS normalt og plugins tar vare på alt for deg, uten funksjoner å ringe, ingen mixins å inkludere eller argumenter for å passere.
Det har vært mange en preprocessor mixin skrevet for å håndtere innsetting av leverandørprefikser. For eksempel kan du ha brukt @include boks størrelse (grense boks); fra kompassbiblioteket til utgående leverandør prefiks box-sizing regler.
Problemet med å stole på mixins for leverandør prefikser er:
Accentsconagua
box-sizing for langt til lenge ...)Autoprefixer eliminerer disse bekymringene ved å håndtere prosessen med leverandørprefiksering automatisk. Autoprefixer skanner CSS, sjekker det mot data fra CanIUse.com, legger deretter til prefiksene som kreves.
Les mer om Autoprefixer på: https://github.com/postcss/autoprefixer
Å generere både standard og RTL (høyre til venstre) stilark fra en enkelt kilde er også noe som er gjort med preprosessorer, men det krever vanligvis å bruke flere mixins og / eller interpolerende variabler i koden din på flere steder. For eksempel, i stedet for å skrive margin-venstre: 1rem; du må kanskje skrive margin - # dir: 1rem; eller @include margin-left (1rem);.
Med rtlcss plugin av Mohammad Younes trenger du imidlertid ikke å bruke mixins eller variabel interpolering. Du skriver bare stilarket som du normalt ville, og pluginet vil finne alle forekomster eller "høyre" eller "venstre" og bytte dem rundt. Så margin-venstre: 1rem; blir automatisk margin-høyre: 1rem; uten at du må skrive noen spesiell kode for å få det til å skje.
Les mer om rtlcss på: https://github.com/MohammadYounes/rtlcss
Med Brian Holts postcss-colorblind-plugin kan du automatisk generere forskjellige versjoner av stilarket ditt, som gir deg førstehånds erfaring med hvordan designet ditt vil se ut som en person med fargeblindhet. Det kan simulere åtte forskjellige typer fargeblindhet, slik at du får en veldig solid forståelse av hvor lett fargeskjemaene dine er tilgjengelige.
Dette er et eksempel på funksjonalitet som du virkelig må gå til PostCSS for å finne, da det ville være svært vanskelig for forprosessorer å oppnå.
Les mer om postcss-colorblind på: https://github.com/btholt/postcss-colorblind
Postcss-svgo plugin av Ben Briggs kan gi deg håndfri optimalisering av inline SVG-kode. For eksempel dette:
bakgrunn: url ('data: image / svg + xml; utf-8,');Kan kokes ned til dette, mindre enn halvparten av koden:
bakgrunn: url ('data: image / svg + xml; utf-8,');Les mer om postcss-svgo på: https://github.com/ben-eb/postcss-svgo
Mens forprosessorer kan strikke mellomrom og kommentarer, kan cssnano-pakken fra Ben Briggs utføre alle slags optimaliseringer utover disse to trinnene. Vi dekker cssnano i detalj i opplæringen for Minifisering og optimalisering.
Les mer om cssnano på: https://github.com/ben-eb/cssnano
Postcss-font-magiker plugin av Jonathan Neal gjør det å legge til egendefinerte skrifter så enkelt som å bruke vanlige skrifter. Du trenger ikke å bruke noen mixins, bare legg til en font-family regelen som du normalt ville:
kropp font-family: "Alice";
... og pluggen vil håndtere full @ Font-face generasjon for deg:
@ font-face font-family: "Alice"; font-style: normal; font-weight: 400; src: local ("Alice"), lokal ("Alice-Regular"), url ("http://fonts.gstatic.com/s/alice/v7/sZyKh5NKrCk1xkCk_F1S8A.eot?#") format ("eot") , url ("http://fonts.gstatic.com/s/alice/v7/l5RFQT5MQiajQkFxjDLySg.woff2") format ("woff2"), url ("http://fonts.gstatic.com/s/alice/v7 /_H4kMcdhHr0B8RDaQcqpTA.woff ") format (" woff "), url (" http://fonts.gstatic.com/s/alice/v7/acf9XsUhgp1k2j79ATk2cw.ttf ") format (" truetype ") kropp font-familie: "Alice"; Les mer om postcss-font-magiker på: https://github.com/jonathantneal/postcss-font-magician
Det er seks oppsett guider nedenfor: en Gulp og Grunt guide for hver større preprocessor. Det er ikke nødvendig å lese alle seks, du kan bare hoppe rett til veilederen for din foretrukne preprosessor og byggeverktøy. Hvis du ikke er sikker på om du skal bruke Gulp eller Grunt, er Gulp definitivt det enklere valget for denne opplæringen.
For hvilken veiledning du følger, må du begynne med et tomt Gulp eller Grunt-prosjekt. 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.
Etter at du har installert et tomt prosjekt for en av seksjonene nedenfor, må du også installere to PostCSS-plugins: Autoprefixer og cssnano. Du kan gjøre det ved å kjøre kommandoen:
npm installer autoprefixer cssnano - save-dev
Vi bruker disse to plugins for å teste at PostCSS og preprosessoren din jobber sammen som forventet.
Den første regelen om å bruke en preprosessor med PostCSS er at du alltid skal kjøre den nevnte preprosessoren først. Dette skyldes at du ikke vil ha noen preprosessorspesifikke syntaks i koden din som kan koble et PostCSS-plugin, og du vil heller ikke at PostCSS gjør endringer i koden din som kan forhindre at en forprosessor kjører som forventet.
For hver preprosessor vi installerer, får vi dem til å kjøre autoprefixer og cssnano etter at forprosessoren er ferdig med samlingen. I hvert tilfelle må vi legge til noen testkode for disse to pluginene for å fungere på.
For å lagre gjentatt samme kode i hver del nedenfor, når du ser en instruksjon som forteller deg at du legger til PostCSS-testkoden, legger du til dette i forhåndsbehandler kildefilen du jobber med:
.css_nano, .css_nano + p, [class * = "css_nano"], .css_nano / * cssnano fjerner denne kommentaren * / display: flex; 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));
Hvis det lykkes, kommer din kompilerte kode i hvert tilfelle ut som:
.css_nano, .css_nano + p, [class * = css_nano] display: -webkit-boks; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 1rem 2.5rem 2rem 1.5rem; font- vekt~~POS=HEADCOMP: 400; padding: 1.75rem, bredde: 46.5rem
Merk: bruken av flexbox har blitt autoprefixed, og cssnano har utført flere optimaliseringer av koden. Vi bruker den samme koden for å teste cssnano som vi gjorde i forrige veiledning for Minifisering og optimalisering, så vennligst se avsnittet "cssnano" deri for detaljer om optimaliseringene som utføres.
Fordi du allerede jobber med Node.js for å kjøre Gulp eller Grunt og PostCSS, er den enkleste måten å bruke Sass ved siden av dem å gjøre det via LibSass. Dette er også betydelig raskere enn Ruby Sass. Vi distribuerer LibSass via gulp-sass eller grunt-contrib-sass modulene.
Installer gulp-sass-modulen i prosjektet ditt med npm installer gulp-sass - save-dev.
Nå kan du oppdatere Gulpfile til følgende:
var gulp = krever ('gulp'); var postcss = krever ('gulp-postcss'); var sass = krever ('gulp-sass'); var autoprefixer = krever ('autoprefixer'); var cssnano = krever ('cssnano'); gulp.task ('css', funksjon () var prosessorer = [autoprefixer, cssnano]; return gulp.src ('./ src / * .scss') .pipe (sass (). .logError)). pip (postcss (prosessorer)). pip (gulp.dest ('./ dest')););La oss bryte ned det vi har endret fra standardstarter Gulpfile:
jafs-sass, autoprefixer og cssnano autoprefixer og cssnano variabler til prosessorer matriserør() linje, .rør (sass () ... , å behandle Sass, være sikker på å plassere den før linjen som behandler PostCSSNå kan vi kjøre noen tester for å sikre at både Sass og PostCSS samler som forventet.
Endre navn på din eksisterende "src / style.css" -fil til "src / style.scss" og legg til følgende testkode for den:
$ font-stack: Helvetica, sans-serif; $ primærfarge: # 333; kropp font: 100% $ font-stack; farge: $ primærfarge;
Løpe gulp css og du bør se en ny "style.css" -fil vises i "dest" -mappen din med innholdet:
kropp font: 100% Helvetica, sans-serif; farge: # 333;
Nå legger du til PostCSS-testkoden som ble oppgitt tidligere i denne opplæringen til "style.scss" -filen din.
Kjør din gulp css kommando, og du bør se riktig kode vises i filen "dest / style.css":
kropp font: 100% Helvetica, sans-serif; farge: # 333 .css_nano, .css_nano + p, [class * = css_nano] display: -webkit-boks; display: -webkit-flex; display: -ms -flexbox; display: flex; margin: 1rem 2.5rem 2rem 1.5rem; font-weight: 400; polstring: 1,75rem; bredde: 46,5rem
I ditt nye Grunt-prosjekt installerer du grunt-contrib-sass-modulen med npm installere grunt-contrib-sass.
Legg deretter til en grunt.loadNpmTasks () Fungerer for det under den eksisterende du har for PostCSS:
grunt.loadNpmTasks ( 'grov-postcss'); grunt.loadNpmTasks ( 'grov-contrib-sass');
Du må nå sette opp en ny oppgave for behandling av Sass. Etter denne linjen:
grunt.initConfig (
... men før den eksisterende postcss oppgave, legg til denne koden:
sass: dist: files: 'src / style.css': 'src / style.scss',
Nå registrerer vi en oppgave som vil kjøre Sass og deretter PostCSS. Etter grunt.loadNpmTasks () funksjonen du bare satt inn, legg til:
grunt.registerTask ('css', ['sass', 'postcss']);For å teste oppsettet ditt, endre navn på din eksisterende "src / style.css" -fil til "style.scss". Legg til denne Sass-koden til den:
$ font-stack: Helvetica, sans-serif; $ primærfarge: # 333; kropp font: 100% $ font-stack; farge: $ primærfarge;
Kjør kommandoen grunt css og du bør se en ny fil opprettet i "dest" -mappen din med navnet "style.css" og inneholder denne koden:
kropp font: 100% Helvetica, sans-serif; farge: # 333;
Vi får nå våre Autoprefixer- og cssnano-plugins som kjører. Oppdater Gruntfile s prosessorer array til følgende:
prosessorer: [krever ('autoprefixer') (), krever ('cssnano') ()]Legg PostCSS-testkoden til "style.scss" -filen, kjør kommandoen grunt css igjen, og du bør finne din omkompilerte "dest / style.css" -filen inneholder nå den riktige autoprefixed og optimaliserte koden.
Stylus og PostCSS fungerer spesielt godt sammen, takket være etableringen av PostStylus-pakken av Sean King, som kombinerer behandlingen av både Stylus og PostCSS. Hvis du er en Stylus-utvikler, kan du bare legge til PostStylus i din kompileringsprosess og umiddelbart få tilgang til å bruke PostCSS-plugins som en del av arbeidsflyten din..
PostStylus: https://github.com/seaneking/poststylus
Hvis du bruker premade Gulpfile fra startprosjektet, vil du notere bruker gulp-postcss-plugin. Dette er faktisk bare der som det trengs for Sass og LESS oppsettprosesser, men for Stylus trenger vi ikke det fordi vi bruker PostStylus som vår kompilator i stedet.
Du kan fjerne den fra prosjektet ditt med npm avinstaller gulp-postcss - save-dev, og slett denne linjen fra din Gulpfile:
var postcss = krever ('gulp-postcss');Nå kan vi installere de to plugins vi trenger for Stylus og PostCSS kompilering, ved å kjøre kommandoen:
npm installer gulp-stylus poststylus --save-dev
Oppdater Gulpfile for å bli:
var gulp = krever ('gulp'); Var stylus = krever ('gulp-stylus'); var poststylus = krever ('poststylus'); var autoprefixer = krever ('autoprefixer'); var cssnano = krever ('cssnano'); gulp.task ('css', funksjon () var prosessorer = [autoprefixer, cssnano]; return gulp.src ('./ src / *. styl') .pipe (stylus (bruk: [poststylus (prosessorer)] )). pip (gulp.dest ('./ dest')););Her er hva vi har gjort ovenfor:
jafs-pennen, poststylus, autoprefixer og cssnano autoprefixer og cssnano variabler til prosessorer matrise.rør() linje som leser .rør (postcss (prosessorer)) .rør (stylus (... , for å sette modulene til gulp-stylus og poststylus for å håndtere vår kompilering Nå er vi klare til å teste kompilering. I "src" -mappen din, endre navn på "style.css" til "style.styl" og legg til denne testen Stilkode:
$ font-stack = Helvetica, sans-serif $ primærfarge = # 333 kropps skrifttype: 100% $ font-stack farge: $ primærfarge
Kjør gulp css kommando, og du bør se en "style.css" -fil vises i mappen "dest" med dette innholdet:
kropp font: 100% Helvetica, sans-serif; farge: # 333;
Legg til PostCSS-testkoden som ble oppgitt tidligere til "style.styl" -filen din, og sørg for at bare fanedeler er i den latte koden, ikke mellomrom.
Kompompilere, og kontroller at du har riktig utdata i filen "dest / style.css".
kropp font: 100% Helvetica, sans-serif; farge: # 333 .css_nano, .css_nano + p, [class * = css_nano] display: -webkit-boks; display: -webkit-flex; display: -ms -flexbox; display: flex; margin: 1rem 2.5rem 2rem 1.5rem; font-weight: 400; polstring: 1,75rem; bredde: 46,5rem
Som med Gulp-prosjektet for Stylus, er standard PostCSS-kompilatoren som følger med startprosjektet ikke nødvendig, det er rent for Sass og LESS oppsettprosesser. Du kan fjerne den fra prosjektet ditt med npm avinstallere grunt-postcss - save-dev.
Nå kan vi installere grunt-contrib-stylus og poststylus med kommandoen:
npm installere grunt-contrib-stylus poststylus --save-dev
Vi skal ikke bruke grunt-postcss, så finn denne linjen:
grunt.loadNpmTasks ( 'grov-postcss');
Og erstatt den med:
grunt.loadNpmTasks ( 'grov-contrib-stylus');
Gitt at vi ikke bruker grunt-postcss, betyr det at vi ikke lenger trenger postcss Oppgave vi har definert inne grunt.initConfig (...);. Slett oppgavekonfigurasjonen og erstatt den med denne nye pekepenn oppgave:
stylus: compile: options: , filer: 'dest / style.css': 'src / style.styl'
Nå er vi klare til å teste kompilering. I "src" -mappen din, endre navn på "style.css" til "style.styl" og legg til denne testen Stilkode:
$ font-stack = Helvetica, sans-serif $ primærfarge = # 333 kropps skrifttype: 100% $ font-stack farge: $ primærfarge
Kjør kommandoen grunt stylus og du bør se en "style.css" -fil vises i mappen "dest" med dette innholdet:
kropp font: 100% Helvetica, sans-serif; farge: # 333
For å legge til våre PostCSS-plugins i kompileringsprosessen må vi først legge til denne koden helt til toppen av vår Gruntfile, over module.exports ... linje:
var poststylus = funksjon () returkrav ('poststylus') (['autoprefixer', 'cssnano']);Dette er hvor du vil laste inn noen PostCSS-plugins du vil bruke, heller enn i en prosessorer array som du vil bli vant til fra våre andre opplæringsprogrammer.
Finn deretter opsjoner objekter inne i stylus-oppgaven, og oppdatere den til følgende:
alternativer: bruk: [poststylus],
Dette forteller grunt-contrib-stylus å bruke poststylus under kompilering, og dens plugins sammen med den.
Legg til "PostCSS test kode" til "src / style.styl" filen, kjør grunt stylus, og du bør se følgende innhold skrevet inn i filen "dest / style.css":
kropp font: 100% Helvetica, sans-serif; farge: # 333 .css_nano, .css_nano + p, [class * = css_nano] display: -webkit-boks; display: -webkit-flex; display: -ms -flexbox; display: flex; margin: 1rem 2.5rem 2rem 1.5rem; font-weight: 400; polstring: 1,75rem; bredde: 46,5rem
Installer gulp-less modulen i prosjektet ditt med npm installer gulp-less - save-dev.
Nå kan du oppdatere Gulpfile til følgende:
var gulp = krever ('gulp'); var postcss = krever ('gulp-postcss'); var mindre = krever ('gulp-less'); var autoprefixer = krever ('autoprefixer'); var cssnano = krever ('cssnano'); gulp.task ('css', funksjon () var prosessorer = [autoprefixer, cssnano]; return gulp.src ('./ src / *. mindre') .pipe (mindre ()) .pipe (postcss ). pip (gulp.dest ('./ dest')););La oss bryte ned det vi har endret fra standardstarter Gulpfile:
svelge-less, autoprefixer og cssnano autoprefixer og cssnano variabler til prosessorer matrise.rør (mindre ()) å behandle den mindre, er sikker på å plassere den før linjen som behandler PostCSSNå kan vi kjøre noen tester for å sikre at både LESS og PostCSS samler som forventet.
Endre navn på filen "src / style.css" til "src / style.less" og legg til følgende testkode for det:
@ font-stack: Helvetica, sans-serif; @ primærfarge: # 333; kropp font: 100% @ font-stack; farge: @ primærfarge;
Løpe gulp css og du bør se en ny "style.css" -fil vises i "dest" -mappen din med innholdet:
kropp font: 100% Helvetica, sans-serif; farge: # 333
Nå legger du til PostCSS-testkoden som er oppgitt tidligere i denne opplæringen, til "style.less" -filen din.
Kjør din gulp css kommando, og du bør se den riktige koden som nå vises i filen "dest / style.css".
kropp font: 100% Helvetica, sans-serif; farge: # 333 .css_nano, .css_nano + p, [class * = css_nano] display: -webkit-boks; display: -webkit-flex; display: -ms -flexbox; display: flex; margin: 1rem 2.5rem 2rem 1.5rem; font-weight: 400; polstring: 1,75rem; bredde: 46,5rem
I ditt nye Grunt-prosjekt installerer du grunt-contrib-less modulen med npm installere grunt-bidrag-mindre, Legg deretter til en grunt.loadNpmTasks () Fungerer for det under den eksisterende du har for PostCSS:
grunt.loadNpmTasks ( 'grov-postcss'); grunt.loadNpmTasks ( 'grov-contrib-mindre');
Du må nå sette opp en ny oppgave for å behandle MINDRE. Etter denne linjen:
grunt.initConfig (
... men før den eksisterende postcss oppgave, legg til denne koden:
mindre: produksjon: filer: 'src / style.css': 'src / style.less',
Nå registrerer vi en oppgave, for å kjøre LESS og deretter PostCSS. Etter grunt.loadNpmTasks () funksjonen du bare satt inn, legg til:
grunt.registerTask ('css', ['mindre', 'postcss']);For å teste oppsettet ditt, endre navn på filen "src / style.css" "style.less". Legg til denne MINDRE koden til den:
@ font-stack: Helvetica, sans-serif; @ primærfarge: # 333; kropp font: 100% @ font-stack; farge: @ primærfarge;
Kjør kommandoen grunt css og du bør se en ny fil opprettet i "dest" -mappen din med navnet "style.css" og inneholder denne koden:
kropp font: 100% Helvetica, sans-serif; farge: # 333333;
Nå legger vi til PostCSS-pluginene i kompilasjonsflyten. Oppdater Gruntfile s prosessorer array til følgende:
prosessorer: [krever ('autoprefixer') (), krever ('cssnano') ()]Legg PostCSS testkoden til din "style.less" -fil, kjør kommandoen grunt css igjen, og du bør finne din omkompilerte "dest / style.css" -filen inneholder nå riktig autoprefixed og optimalisert kode:
kropp font: 100% Helvetica, sans-serif; farge: # 333 .css_nano, .css_nano + p, [class * = css_nano] display: -webkit-boks; display: -webkit-flex; display: -ms -flexbox; display: flex; margin: 1rem 2.5rem 2rem 1.5rem; font-weight: 400; polstring: 1,75rem; bredde: 46,5rem
Deretter skal vi sjekke ut noe du nesten kunne vurdere en annen type preprocessing ved hjelp av PostCSS til automatisk genererte BEM / SUIT-kompatible CSS-klasser. Denne prosessen gjør BEM / SUIT-utviklingen mye lettere å holde styr på, for ikke å nevne mer effektiv.
Se deg i neste opplæring!
