Share
Dacă sunteți interesat să utilizați PostCSS, dar totuși vă placeți preprocesorul preferat, nu vă faceți griji. Nu trebuie să faceți o alegere între cele două - le puteți folosi chiar alături de ele.
Există mai multe pluginuri PostCSS care complimentează preprocesoarele foarte bine, deoarece ele adaugă funcționalitate în fluxul de lucru care ar fi altfel imposibilă sau cel puțin dificil, folosind doar un preprocesor.
Vom atinge unele dintre aceste plugin-uri complementare, apoi vom trece prin ghidurile de configurare pentru a vă arăta cum să utilizați PostCSS unul lângă celălalt cu Sass, Stylus sau LESS.
Înainte să intrăm Cum puteți folosi preprocesoare împreună cu PostCSS, vom vorbi puțin despre asta De ce ai vrea. Răspunsul scurt este: să obțină acces la pluginurile PostCSS a căror funcționalitate complimentează preprocesoarele. Pentru a vă arăta de ce merită acest lucru, vom trece peste o mână de plugin-uri care funcționează foarte bine cu preprocesoarele.
Notă: este posibil să se obțină rezultate finale similare prin utilizarea mixinelor și a funcțiilor în codul preprocesor obișnuit, dar cu fiecare dintre exemplele de mai jos procesul este tratat automat. Vă scrieți în mod normal CSS-ul și plugin-urile se ocupă de toate pentru dvs., fără funcții de apelare, fără amestecuri de inclus sau argumente pentru a trece.
Au fost multe combinații de preprocesoare scrise pentru a se ocupa de introducerea prefixelor furnizorilor. De exemplu, s-ar fi putut folosi @ includeți dimensiunea cutiei (frontală); de la biblioteca Compass la furnizor de ieșire prefixat box-dimensionare norme.
Problema de a se baza pe mixuri pentru prefixele furnizorilor este:
Accentsconagua
box-dimensionare pentru mult timp ...)Autoprefixer elimină aceste preocupări prin gestionarea automată a procesului de prefixare a vânzătorului. Autoprefixer scanează dvs. CSS, verifică-l împotriva datelor de la CanIUse.com, apoi adaugă prefixele necesare.
Citiți mai multe despre Autoprefixer la: https://github.com/postcss/autoprefixer
Generarea foilor de stil implicite și RTL (de la dreapta la stânga) dintr-o singură sursă este, de asemenea, ceva care a fost făcut cu preprocesoare, însă de obicei necesită utilizarea mai multor mixuri și / sau interpolarea variabilelor în codul dvs. în mai multe locuri. De exemplu, mai degrabă decât scris margin-stânga: 1rem; este posibil să aveți nevoie să scrieți margine - # dir: 1rem; sau @ include margin-left (1rem);.
Cu ajutorul pluginului rtlcss de către Mohammad Younes, nu trebuie să utilizați mixuri sau interpolare variabilă, ci doar să vă scrieți foaia de stil ca în mod normal și pluginul să găsească toate instanțele sau "dreapta" sau "stânga" și să le schimbați. Asa de margin-stânga: 1rem; devine automat margin-dreapta: 1rem; fără să trebuiască să scrieți vreun cod special pentru a face acest lucru.
Citiți mai multe despre rtlcss la: https://github.com/MohammadYounes/rtlcss
Cu pluginul postcss-colorblind de Brian Holt puteți genera în mod automat diferite versiuni ale foii de stil, care vă oferă o experiență de primă mână despre ceea ce ar arăta designul dvs. pentru o persoană cu orbire colorată. Acesta poate simula opt tipuri diferite de colorblindness, ajutându-vă să obțineți o înțelegere foarte solidă pe cât de accesibile sunt schemele de culori.
Acesta este un exemplu de funcționalitate pe care într-adevăr trebuie să o deplasați la PostCSS pentru a găsi, deoarece ar fi foarte dificil pentru preprocesori să realizeze.
Citiți mai multe despre postcss-colorblind la: https://github.com/btholt/postcss-colorblind
Plug-in postcss-svgo de Ben Briggs vă poate oferi optimizarea mâinilor pentru codul SVG inline. De exemplu:
fundal: url ('date: image / svg + xml; utf-8,„);Poate fi fiert la acest lucru, mai puțin de jumătate din cod:
fundal: url ('date: image / svg + xml; utf-8,„);Citiți mai multe despre postcss-svgo la: https://github.com/ben-eb/postcss-svgo
În timp ce preprocesorii pot elimina spațiul alb și comentariile, pachetul cssnano de Ben Briggs poate efectua tot felul de optimizări deasupra acestor două etape. Acoperim cssnano în detaliu în tutorialul Minification and Optimization.
Citiți mai multe despre cssnano la: https://github.com/ben-eb/cssnano
Plugin-ul postcss-font-magician de Jonathan Neal face adăugarea de fonturi personalizate la fel de ușor ca utilizarea fonturilor obișnuite. Nu este nevoie să folosiți mixuri, ci doar să adăugați a familie de fonturi așa cum ați proceda în mod normal:
corp font-family: "Alice";
... și plugin-ul se va ocupa de plin @ Font-face generație pentru tine:
@ font-face font-family: "Alice"; font-style: normal; greutatea fontului: 400; src: local ("Alice"), local ("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 (Format "") format ("woff"), format url ("http://fonts.gstatic.com/s/alice/v7/acf9XsUhgp1k2j79ATk2cw.ttf") format font-family: "Alice"; Citiți mai multe despre postcss-font-magician la: https://github.com/jonathantneal/postcss-font-magician
Există șase ghiduri de configurare de mai jos: un ghid Gulp și Grunt pentru fiecare preprocesor major. Nu este nevoie să citiți toate cele șase, puteți să treceți direct la ghid pentru preprocesorul preferat și să creați un instrument. Dacă nu sunteți sigur dacă utilizați Gulp sau Grunt, Gulp este cu siguranță cea mai simplă alegere pentru acest tutorial.
Pentru oricare dintre ghidurile pe care le urmați, va trebui să începeți cu un proiect Gulp sau Grunt gol. Puteți citi despre cum să configurați proiectele Gulp sau Grunt pentru PostCSS în tutorialele anterioare
respectiv.
Dacă nu doriți să configurați manual proiectul de la zero, puteți să descărcați fișierele sursă atașate acestui tutorial și să extrageți proiectul Gulp sau Gruntul furnizat într-un dosar gol al proiectului. Apoi, cu un terminal sau un prompt de comandă indicat la dosarul de executare a comenzii npm install.
După ce configurați un proiect gol pentru una dintre secțiunile de mai jos, va trebui, de asemenea, să instalați două pluginuri PostCSS: Autoprefixer și cssnano. Puteți face acest lucru executând comanda:
npm instalează autoprefixer cssnano --save-dev
Vom folosi aceste două plugin-uri pentru a testa că PostCSS și preprocesorul dvs. lucrează împreună cum era de așteptat.
Prima regulă de utilizare a unui preprocesor cu PostCSS este că ar trebui să rulați întotdeauna preprocesorul respectiv primul. Acest lucru se datorează faptului că nu doriți să aveți în codul dvs. o sintaxă specifică de preprocesor, care ar putea sufoca un plugin PostCSS și, de asemenea, nu doriți ca PostCSS să facă modificări în codul dvs., ceea ce ar putea împiedica executarea unui preprocesor conform așteptărilor.
Pentru fiecare dintre preprocesoarele pe care le-am setat, le vom rula pe autoprefixer și cssnano după ce preprocesorul și-a terminat compilația. În fiecare caz, va trebui să adăugăm un cod de testare pentru aceste două plugin-uri pentru a funcționa.
Pentru a salva repetarea aceluiași cod în fiecare secțiune de mai jos, când vedeți o instrucțiune care vă spune să adăugați codul de testare PostCSS, adăugați-l la fișierul sursă preprocesor pe care lucrați:
.css_nano, .css_nano + p, [class * = "css_nano"], .css_nano / * cssnano va elimina acest comentariu * / display: flex; font-weight: normal; margin-top: 1rem; marginea inferioară: 2rem; margin-stânga: 1.5rem; margin-dreapta: 2.5rem; font-weight: normal; padding: 1.75rem; lățime: calc (50rem - (2 * 1.75rem));
Dacă reușiți, codul dvs. compilat va apărea în fiecare caz ca:
.css_nano, .css_nano + p, [class * = css_nano] display: -webkit-box; display: -webkit-flex; greutate: 400; padding: 1.75rem; lățime: 46.5rem
Notă: utilizările flexbox au fost autoprefixate, iar cssnano a efectuat mai multe optimizări ale codului. Folosim același cod pentru a testa cssnano așa cum am făcut-o în tutorialul precedent pentru miniere și optimizare, așa că vă rugăm să consultați secțiunea "cssnano" pentru detalii despre optimizările efectuate.
Deoarece lucrați deja cu Node.js pentru a rula Gulp sau Grunt și PostCSS, cel mai simplu mod de a utiliza Sass alături de ei este să o faceți prin LibSass. Acest lucru este, de asemenea, considerabil mai rapid decât Ruby Sass. Vom implementa LibSass prin modulele gulp-sass sau grunt-contrib-sass.
Instalați modulul gulp-sass în proiectul dvs. cu npm instalează gulp-sass - saves-dev.
Acum vă puteți actualiza Gulpfile la următoarele:
var gulp = necesită ("gulp"); var postcss = necesită ("gulp-postcss"); var sass = necesită ("gulp-sass"); var autoprefixer = necesită ("autoprefixer"); var cssnano = cer ('cssnano'); gulp.task ('css', functie () var procesoare = [autoprefixer, cssnano]; return gulp.src ('./ src / * .sss') .pipe (sass .logError)) .pipe (postcss (procesoare)) .pipe (gulp.dest ('./ dest')););Să distrugem ceea ce am schimbat de la standardul de pornire Gulpfile:
înghițitură-Sass, autoprefixer și cssnano autoprefixer și cssnano variabilele la procesoare mulțimepipe () linia, .pipe (sass () ... , pentru a procesa Sass, fiind sigur de a le plasa înainte de linia care procesează PostCSSAcum putem efectua câteva teste pentru a ne asigura că atât Sass, cât și PostCSS compilează așa cum era de așteptat.
Redenumiți fișierul "src / style.css" existent la "src / style.scss" și adăugați următorul cod de testare:
$ font-stack: Helvetica, sans-serif; $ primar-culoare: # 333; corp font: 100% font-stack; culoare: $ primar-culoare;
Alerga gulp css și ar trebui să vedeți un nou fișier "style.css" care apare în dosarul "dest" cu conținutul:
corp font: 100% Helvetica, sans-serif; culoare: # 333;
Acum, adăugați codul de testare PostCSS furnizat anterior în acest tutorial în fișierul "style.scss".
Rulați-vă gulp css comanda și ar trebui să vedeți codul corect care apare în fișierul "dest / style.css":
corp font: 100% Helvetica, sans-serif; culoare: # 333 .css_nano, .css_nano + p, [class * = css_nano] display: -webkit-box; -flexbox; afișare: flex; margine: 1rem 2.5rem 2rem 1.5rem; greutate font: 400; umplutură: 1.75rem; lățime: 46.5rem
În noul proiect Grunt, instalați modulul grunt-contrib-sass cu npm instalează grunt-contrib-sass.
Apoi adăugați a grunt.loadNpmTasks () funcția pentru aceasta sub cea existentă pe care o aveți pentru PostCSS:
grunt.loadNpmTasks ( 'groh-postcss'); grunt.loadNpmTasks ( 'groh-contrib-sass');
Veți avea nevoie să configurați o nouă sarcină pentru a procesa Sass. După această linie:
grunt.initConfig (
... dar înainte de existența postcss task, adăugați acest cod:
sass: dist: fișiere: 'src / style.css': 'src / style.scss',
Acum vom înregistra o sarcină care va rula Sass și apoi PostCSS. După grunt.loadNpmTasks () funcție pe care tocmai ați introdus-o, adăugați:
grunt.registerTask ('css', ['sass', 'postcss']);Pentru a testa configurarea, redenumiți fișierul "src / style.css" existent la "style.scss". Adăugați acest cod Sass la acesta:
$ font-stack: Helvetica, sans-serif; $ primar-culoare: # 333; corp font: 100% font-stack; culoare: $ primar-culoare;
Rulați comanda grunt css și ar trebui să vedeți un nou fișier creat în folderul "dest" numit "style.css" și conținând acest cod:
corp font: 100% Helvetica, sans-serif; culoare: # 333;
Acum vom primi pluginurile Autoprefixer și cssnano. Actualizați-vă Gruntfile procesoare array la următoarele:
procesoare: [necesită ('autoprefixer') (), necesită ('cssnano') ()]Adăugați codul de test PostCSS în fișierul "style.scss", executați comanda grunt css din nou și ar trebui să găsești că fișierul "dest / style.css" recompilat conține acum codul corect corectat și optimizat.
Stylus și PostCSS funcționează deosebit de bine datorită creării pachetului PostStylus de către Sean King, care combină prelucrarea atât a Stylus cât și a PostCSS. Dacă sunteți dezvoltator Stylus, puteți să adăugați PostStylus în procesul dvs. de compilare și să aveți imediat acces la utilizarea pluginurilor PostCSS ca parte a fluxului dvs. de lucru.
PostStylus: https://github.com/seaneking/poststylus
Dacă utilizați Gulpfile premade de la proiectul starter, veți observa că utilizează pluginul gulp-postcss. Acesta este de fapt doar acolo unde este necesar pentru procesele de configurare Sass și LESS, dar pentru Stylus nu vom avea nevoie de el deoarece folosim PostStylus ca compilator.
Îl puteți elimina din proiect cu ajutorul npm dezinstalați gulp-postcss - saves-dev, și ștergeți această linie din Gulpfile:
var postcss = necesită ("gulp-postcss");Acum putem instala cele două pluginuri de care avem nevoie pentru compilarea Stylus și PostCSS, executând comanda:
npm instalează gulp-stylus poststylus -save-dev
Actualizați-vă Gulpfile pentru a deveni:
var gulp = necesită ("gulp"); var stylus = necesită ("gulp-stylus"); var poststylus = necesită ("poststylus"); var autoprefixer = necesită ("autoprefixer"); var cssnano = cer ('cssnano'); gulp.task ('css', function () var procesoare = [autoprefixer, cssnano]; retur gulp.src ('./ src / *. stil') .pipe (stylus (use: [poststylus (processors)] )) .pipe (gulp.dest ('./ dest')););Iată ce am făcut mai sus:
înghițitură-stylus, poststylus, autoprefixer și cssnano autoprefixer și cssnano variabilele la procesoare mulțime.pipe () line care a citit .pipe (postcss (procesoare)) .pipe (stylus (... , pentru a seta modulele de tip gulp-stylus și poststylus să se ocupe de compilația noastră Acum suntem gata să testăm compilația. În dosarul "src", redenumiți "style.css" la "style.styl" și adăugați acest cod de test Stylus:
$ font-stack = Helvetica, sans-serif $ primar-color = # 333 caractere corp: 100% $ font-stack culoare: $ primar-color
Pornește gulp css comanda și ar trebui să vedeți un fișier "style.css" care apare în dosarul "dest" cu acest conținut:
corp font: 100% Helvetica, sans-serif; culoare: # 333;
Adăugați codul de test PostCSS furnizat anterior în fișierul dvs. "style.styl", asigurându-vă că numai indicele filei sunt în codul lipit, nu în spații.
Recompilați și verificați dacă aveți fișierul "dest / style.css" corespunzător.
corp font: 100% Helvetica, sans-serif; culoare: # 333 .css_nano, .css_nano + p, [class * = css_nano] display: -webkit-box; -flexbox; afișare: flex; margine: 1rem 2.5rem 2rem 1.5rem; greutate font: 400; umplutură: 1.75rem; lățime: 46.5rem
Ca și în cazul proiectului Gulp pentru Stylus, compilatorul implicit PostCSS care vine cu proiectul de pornire nu este necesar, existând doar pentru procesele de configurare Sass și LESS. Îl puteți elimina din proiect cu ajutorul npm dezinstala grunt-postcss -save-dev.
Acum putem instala grunt-contrib-stylus și poststylus cu comanda:
npm instalează grunt-contrib-stylus poststylus - salvează-dev
Nu vom mai folosi zgomotul postcss, deci localizați această linie:
grunt.loadNpmTasks ( 'groh-postcss');
Și înlocuiți-l cu:
grunt.loadNpmTasks ( 'groh-contrib-stilou');
Dat fiind că nu folosim postcss, înseamnă că nu mai avem nevoie de ea postcss sarcină pe care am definit-o înăuntru grunt.initConfig (...);. Ștergeți configul de sarcină și înlocuiți-l cu acest nou stylus sarcină:
stylus: compile: opțiuni: , fișiere: 'dest / style.css': 'src / style.styl'
Acum suntem gata să testăm compilația. În dosarul "src", redenumiți "style.css" la "style.styl" și adăugați acest cod de test Stylus:
$ font-stack = Helvetica, sans-serif $ primar-color = # 333 caractere corp: 100% $ font-stack culoare: $ primar-color
Rulați comanda grunduit stylus și ar trebui să vedeți un fișier "style.css" care apare în dosarul "dest" cu acest conținut:
corp font: 100% Helvetica, sans-serif; culoare: # 333
Pentru a adăuga pluginurile noastre PostCSS în procesul de compilare, trebuie mai întâi să adăugăm acest cod la partea superioară a Gruntfile noastre, deasupra module.exports ... linia:
var poststylus = funcția () returnați cerința ('poststylus') (['autoprefixer', 'cssnano']);Aici veți încărca toate pluginurile PostCSS pe care doriți să le utilizați, mai degrabă decât într-un procesoare așa cum veți fi obișnuiți cu alte tutoriale.
Apoi găsiți Opțiuni obiect în interiorul tastei stiloului și actualizați-l la următoarele:
opțiuni: use: [poststylus],
Acest lucru spune grunt-contrib-stylus de a folosi poststylus în timpul compilării, și plugin-urile sale împreună cu ea.
Adăugați "codul de test PostCSS" în fișierul "src / style.styl", executați grunduit stylus, și ar trebui să vedeți următorul conținut scris în fișierul dvs. "dest / style.css":
corp font: 100% Helvetica, sans-serif; culoare: # 333 .css_nano, .css_nano + p, [class * = css_nano] display: -webkit-box; -flexbox; afișare: flex; margine: 1rem 2.5rem 2rem 1.5rem; greutate font: 400; umplutură: 1.75rem; lățime: 46.5rem
Instalați modulul fără gulp în proiectul dvs. cu npm instalează gulp-less -save-dev.
Acum vă puteți actualiza Gulpfile la următoarele:
var gulp = necesită ("gulp"); var postcss = necesită ("gulp-postcss"); var mai puțin = necesită ("gulp-less"); var autoprefixer = necesită ("autoprefixer"); var cssnano = cer ('cssnano'); gulp.task ('css', function () var procesoare = [autoprefixer, cssnano]; return gulp.src ('./ src / *. less') .pipe (less () ) .pipe (gulp.dest ('./ dest')););Să distrugem ceea ce am schimbat de la standardul de pornire Gulpfile:
înghiți dintr-mai puțin, autoprefixer și cssnano autoprefixer și cssnano variabilele la procesoare mulțime.țeavă (mai puțin ()) pentru a procesa LESS, fiind sigur că o plasezi înainte de linia care procesează PostCSSAcum putem efectua câteva teste pentru a ne asigura că atât LESS, cât și PostCSS se compun conform așteptărilor.
Redenumiți fișierul "src / style.css" existent la "src / style.less" și adăugați următorul cod de testare:
@ font-stack: Helvetica, sans-serif; @ primar-culoare: # 333; corp font: 100% @ font-stack; culoarea: @ culoarea primară;
Alerga gulp css și ar trebui să vedeți un nou fișier "style.css" care apare în dosarul "dest" cu conținutul:
corp font: 100% Helvetica, sans-serif; culoare: # 333
Acum, la fișierul "stil.less" adăugați codul de testare PostCSS furnizat mai devreme în acest tutorial.
Rulați-vă gulp css comanda și ar trebui să vedeți codul corect care apare acum în fișierul "dest / style.css".
corp font: 100% Helvetica, sans-serif; culoare: # 333 .css_nano, .css_nano + p, [class * = css_nano] display: -webkit-box; -flexbox; afișare: flex; margine: 1rem 2.5rem 2rem 1.5rem; greutate font: 400; umplutură: 1.75rem; lățime: 46.5rem
În noul proiect Grunt, instalați modulul grunt-contrib-less cu npm instalează grunt-contrib-less, apoi adăugați a grunt.loadNpmTasks () funcția pentru aceasta sub cea existentă pe care o aveți pentru PostCSS:
grunt.loadNpmTasks ( 'groh-postcss'); grunt.loadNpmTasks ( 'groh-contrib mai puțin');
Veți avea nevoie să configurați o nouă sarcină pentru procesarea mai puțin. După această linie:
grunt.initConfig (
... dar înainte de existența postcss task, adăugați acest cod:
mai puțin: producție: fișiere: 'src / style.css': 'src / style.less',
Acum vom înregistra o sarcină, pentru a rula mai puțin și apoi PostCSS. După grunt.loadNpmTasks () funcție pe care tocmai ați introdus-o, adăugați:
grunt.registerTask ("css", ['less', 'postcss']);Pentru a testa configurarea, redenumiți fișierul "src / style.css" "style.less". Adăugați acest cod LOSĂ la acesta:
@ font-stack: Helvetica, sans-serif; @ primar-culoare: # 333; corp font: 100% @ font-stack; culoarea: @ culoarea primară;
Rulați comanda grunt css și ar trebui să vedeți un nou fișier creat în folderul "dest" numit "style.css" și conținând acest cod:
corp font: 100% Helvetica, sans-serif; culoare: # 333333;
Acum vom adăuga pluginurile noastre PostCSS în fluxul de compilare. Actualizați-vă Gruntfile procesoare array la următoarele:
procesoare: [necesită ('autoprefixer') (), necesită ('cssnano') ()]Adăugați codul de test PostCSS în fișierul "stil.less", executați comanda grunt css din nou și ar trebui să găsești că fișierul "dest / style.css" recompilat conține acum codul corect corectat și optimizat:
corp font: 100% Helvetica, sans-serif; culoare: # 333 .css_nano, .css_nano + p, [class * = css_nano] display: -webkit-box; -flexbox; afișare: flex; margine: 1rem 2.5rem 2rem 1.5rem; greutate font: 400; umplutură: 1.75rem; lățime: 46.5rem
În continuare, vom examina ceva ce ați putea lua în considerare aproape un tip diferit de preprocesare - folosind PostCSS pentru a genera automat clase CSS compatibile BEM / SUIT. Acest proces face ca dezvoltarea BEM / SUIT să fie mult mai ușor de urmărit, ca să nu mai vorbim de eficiență.
Ne vedem în tutorialul următor!
