Share
În tutorialul precedent am trecut prin modul de utilizare a pachetului excelent de preprocesare "PreCSS". În acest tutorial vom aborda preprocesarea bazată pe PostCSS într-un mod diferit; instalând o selecție de pluginuri selectate manual pentru a construi preprocesorul nostru de la bază.
O să te duc prin configurarea a ceea ce eu personal găsiți un amestec excelent de extensii de extensie a limbajului. Dar când vine vorba să vă rulați propriul dvs. preprocesor, ați putea alege să utilizați doar câteva dintre pluginurile pe care le acoperim aici sau ați putea alege deloc, în loc să mergeți cu alte opțiuni.
Aceasta este frumusețea acestui proces; puteți configura configurația dvs. de preprocesor oricum alegeți. Scopul acestui tutorial va fi să vă dați mâna pe experiența de a pune împreună un preprocesor PostCSS și să vă completați caracteristicile pluginurilor disponibile în prezent, astfel încât să puteți decide pentru dvs. ce doriți să utilizați.
Sa incepem!
Primul lucru pe care trebuie să-l faceți este să configurați proiectul dvs. pentru a utiliza fie Gulp, fie Grunt, în funcție de preferințele dvs. Dacă nu aveți deja o preferință pentru unul sau altul, vă recomandăm să utilizați Gulp, deoarece veți avea nevoie de un cod mai mic pentru a obține aceleași scopuri.
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 dvs. de la zero, puteți descărca fișierele sursă atașate acestui tutorial și extrageți fie proiectul Gulp sau Grunt starter furnizat într-un dosar gol al proiectului.
Apoi, cu un terminal sau un prompt de comandă indicat în dosar, executați comanda npm install.
Acest tutorial va presupune că ați urmat intrările anterioare din serie și acum sunteți familiarizați cu modul de instalare a unui plugin în proiectul dvs. și încărcați-l prin Gulpfile sau Gruntfile.
Important! Pe măsură ce treceți, asigurați-vă că ați încărcat pluginurile în Gulpfile / Gruntfile în ordinea în care vedeți în acest tutorial; încărcarea este importantă în PostCSS pentru a menține totul în mișcare.
Primul loc pe care vom începe să-l punem împreună cu preprocesorul personalizat este importurile. Ați văzut deja postul @import stylesheets în tutorialele anterioare Pentru Minizare și Optimizare și Preprocesare cu PreCSS. Modul în care vor fi utilizate importurile în acest preprocesor nu este diferit.
Am atins doar de mai sus faptul că ordinea de încărcare este importantă în PostCSS, și aici găsim primul exemplu al acestui lucru. Vrem să asigurăm totul @import fișierele sunt inline ca primul pas, astfel încât să avem tot codul proiectului nostru într-un singur loc pentru ca celelalte plugin-uri să fie difuzate împotriva.
De exemplu, am putea stoca toate variabilele noastre într-un fișier parțial și să le folosim @import pentru a aduce acest aspect parțial în foaia principală de stil. Dacă nu am rula plugin-ul care inlinează @import în primul rând, variabilele noastre nu vor fi importate și, prin urmare, nu vor fi disponibile pentru lucrul cu restul procesării noastre.
Pentru că vom începe să importăm paralele, vrem să facem un mic truc la Gulpfile înainte de a adăuga funcția de import.
Notă: dacă utilizați Grunt, nu va trebui să faceți nici o schimbare în acest stadiu.
Chiar acum avem orice fișier ".css" găsit în folderul "src" compilat, dar nu dorim să compilam accidental fișiere parțiale. Vom importa totul în fișierul "style.css", așa că este singurul care trebuie să fie compilat.
Găsiți această linie:
Accentsconagua
returnați gulp.src ('./ src / * .css')... și schimbați-l la:
returnați gulp.src ('./ src / style.css')Acesta este același plugin pe care l-am folosit în tutorialul "Pentru minificare și optimizare" și care este folosit și în PreCSS, astfel încât să fiți oarecum familiarizați cu acesta în acest moment.
Instalați plugin-ul în proiectul dvs., apoi în directorul "src" creați un fișier numit "_vars.css" și adăugați un cod de test de bază pentru el. Notați că nu am adăugat încă funcții de variabile, așa că doar câteva CSS-uri directe, de exemplu:
.test fundal: negru;
Acum importați fișierul cu variabile noi în fișierul principal "src / style.css" prin adăugarea acestui cod la primul rând:
@import "_vars";
Compilați-vă codul, apoi verificați fișierul "dest / style.css" și ar trebui să îl vedeți acum conține codul din fișierul "_vars.css".
Notă: acest plugin trebuie sa să fie executate înainte de pluginurile postcss-nested și postcss-simple-vars, ambele pe care le vom folosi.
Continuați și instalați postcss-mixins, apoi adăugați următorul cod în fișierul "src / style.css":
@ define-mixin pictogramă $ rețea, $ culoare .button. $ (rețea) background-image: url ('img / $ (rețea) .png'); fundal-culoare: $ color; @mixin icon twitter, albastru;După compilație, "dest / style.css" ar trebui să aibă următorul cod compilat adăugat la acesta:
.button.twitter background-image: url ('img / twitter.png'); fundal-culoare: albastru; Pluginul postcss-mixins pe care îl folosim aici este același cu cel folosit în PreCSS. Am trecut peste cum să îl folosim în tutorialul PreCSS, deci pentru detalii complete despre sintaxa lui, vezi secțiunea "Mixins" a tutorialului precedent.
Dacă preferați să utilizați sintaxa Sass atunci când creați mixuri, verificați pluginul lui Andy Jansson, postcss-sassy-mixins, care funcționează în același mod ca și postcss-mixins, dar cu sintaxa @mixin pentru a defini un mixin și @include pentru a utiliza unul.
Notă: pluginul postcss-for este altul trebuie sa să fie executate înainte de postcss-nested și postcss-simple-vars.
Instalați pluginul postcss-for, apoi testați-l că funcționează conform așteptărilor adăugând acest cod în fișierul "src / style.css":
@ pentru $ i de la 1 la 3 p: n-de-tip ($ i) margin-stânga: calc (100% / $ i);
Ar trebui să compileze pentru a vă oferi:
p: n-a-tip (1) margin-stânga: calc (100% / 1); p: n-a-tip (2) margin-stânga: calc (100% / 2); p: n-a-tip (3) margin-stânga: calc (100% / 3);
Încă o dată, pluginul pe care îl folosim pentru a adăuga @pentru buclele sunt aceleași cu cele utilizate în PreCSS, așa că pentru informații suplimentare despre sintaxa ei, verificați secțiunea "Loops" din tutorialul anterior.
Pluginul postcss-for trebuie să fie rulat înainte de postcss-simple-vars, ceea ce înseamnă că nu există nicio modalitate de a utiliza variabilele pentru a seta intervalul pe care doriți @pentru buclă pentru a itera prin.
Dacă aceasta este o problemă, puteți utiliza această furcă a pluginului postcss-for, care ar trebui în schimb să fie încărcat după postcss-simple-vars plugins.
Deoarece rulează după evaluarea variabilelor, aveți libertatea de a utiliza variabilele pentru a seta intervalul dorit @pentru pentru a itera prin aceasta:
@ de la: 1; @count: 3; @ pentru $ i de la @ de la @count p: nth-of-type ($ i) margin-stânga: calc (100% / $ i);
Vom adăuga două tipuri de variabile la preprocesorul nostru, ambele putând fi foarte utile. Primul tip utilizează sintaxa asemănătoare Sass, iar al doilea folosește sintaxa proprietăților personalizate CSS, cunoscute și sub numele de variabile CSS.
Instalați aceste două pluginuri, apoi le vom testa fiecare câte o dată.
Mai întâi, vom testa sintaxa Sass asemănătoare cu postcss-simple-vars. Deschideți fișierul "_vars.css" pe care l-ați făcut mai devreme, ștergeți conținutul acestuia și adăugați următorul cod:
$ default_padding: 1rem;
Adăugați următoarele în fișierul "src / style.css" și recompilați:
.post padding: $ default_padding;
Ar trebui să compileze pentru a vă oferi:
.post padding: 1rem;
Acum vom testa proprietățile personalizate CSS ca sintaxa variabilelor postcss-css. Adăugați următorul cod în fișierul "src / style.css":
: rădăcină - h1_font_size: 3rem; h1 font-size: var (- h1_font_size); @media (max-lățime: 75rem) h1 - h1_font_size: 4vw;
Ar trebui să se compileze în:
h1 font-size: 3rem; @media (max-width: 75rem) h1 font-size: 4vw;
Rețineți că atunci când folosim variabilele CSS, a trebuit doar să modificăm valoarea lui --h1_font_size variabilă în interiorul interogării media și scoate în mod automat asociate marimea fontului proprietate. Aceasta este o funcționalitate deosebit de utilă.
Înainte de a continua, voi reaminti din nou, din nou, că abordarea luată în acest tutorial nu este abordarea pe care o faceți avea a lua. Dacă doriți să folosiți un fel de variabilă și nu celălalt, este perfect.
Din perspectiva mea, motivul pentru care îmi place să folosesc ambele tipuri de variabile este că le folosesc în două moduri diferite. În mod obișnuit, folosesc sintaxa proprietăților personalizate CSS din foaia de stil principală, în timp ce folosesc variabilele asemănătoare Sass în fișierele mele parțiale.
Acest lucru îmi permite să precizez proprietățile personalizate CSS pentru tipul de variabile pe care aș putea să le folosesc efectiv într-un proiect live dacă / când acestea sunt bine acceptate în cadrul browserelor. După cum ați văzut în exemplul de mai sus, ele au, de asemenea, anumite funcționalități ca variabilele asemănătoare Sass.
În același timp, pot utiliza variabile asemănătoare Sass pentru lucruri care nu aparțin unei foi de stil vii, în special acelea care există doar pentru a fi prelucrate prin lucruri precum fiecare bucle, condiționări și alte transformări.
Ca o alternativă la utilizarea postcss-simple-vars, vă recomandăm să luați în considerare utilizarea variabilelor postcss-advanced, plugin-ul folosit ca parte a pachetului PreCSS.
Aceasta este, de asemenea, o opțiune excelentă, cu diferența principală fiind faptul că gestionează condiționalități, bucle și variabile în același plugin. Pentru mine, motivul pentru care am ales în prezent postcss-simple-vars este că prefer să aibă condiționări provenind de la un plugin separat; postcss-condiționalități pe care le vom acoperi în scurt timp.
În loc să utilizați variabilele postcss-css, s-ar putea să preferați postcss-custom-properties.
Diferența esențială dintre cele două este proprietățile postcss-personalizate, care se conformează cu strictețe spec. W3C pentru proprietățile personalizate, astfel încât să puteți avea încredere că scrieți numai CSS viitoare corect. Pe de altă parte, variabilele postcss-css oferă funcționalități suplimentare, dar în acest sens nu susține că au o paritate completă cu spec..
Eu personal aleg postcss-css-variabile pentru că eu o folosesc în contextul preprocesării unde scriu o mulțime de cod non-spec oricum. Ca atare aș prefera să am funcționalitatea adăugată peste 100% conformitatea spec.
Cu toate acestea, dacă utilizați variabile în contextul scrierii unui CSS viitor, s-ar putea să găsiți că proprietățile postcss-personalizate sunt potrivite pentru dvs..
Instalați postcss-fiecare plugin apoi adăugați acest cod variabil în fișierul "_vars.css":
$ social: twitter, facebook, youtube;
Acest cod definește o listă stocată în $ socială variabil.
Acum vom crea un @fiecare pentru a itera prin valorile stocate în $ socială variabil. Adăugați acest cod în fișierul "src / style.css":
@ pînă $ pictogramă în ($ social) .icon - $ (pictogramă) background: url ('img / $ (icon) .png'); Al nostru @fiecare buclă este acum gata, dar înainte de ao putea compila avem nevoie pentru a face o mică schimbare de configurare a opțiunilor postcss-simplu-vars.
Veți observa că în codul de mai sus pe care îl folosim $ icon pentru a reprezenta valoarea curentă pe care o interpretăm. Unele dificultăți pot apărea din cauză că pluginul postcss-simple-vars caută $ pentru a identifica variabilele.
Aceasta înseamnă că va vedea $ icon, cred că este o variabilă, încercați să o procesați, apoi vedeți că aceasta nu are valoare. Acest lucru va face să se oprească compilarea și înregistrarea unei erori la consola căreia i sa descoperit o variabilă nedefinită.
Pentru a rezolva acest lucru, dorim să adăugăm opțiunea tăcut: adevărat la opțiunile noastre pentru plugin. Aceasta înseamnă că, dacă descoperă o variabilă nedefinită, nu va înceta să compileze pentru a înregistra o eroare, va continua. Prin urmare, nu va fi deranjată de prezență $ icon în a noastră @fiecare buclă și vom putea compila cu succes.
În matricea procesoarelor din Gulpfile sau Gruntfile, setați opțiunea:
/ * Gulpfile * / simple_vars (silent: true) / * Gruntfile * / necesită ('silent: trueAcum, compilați-vă CSS și ar trebui să obțineți:
.icon-twitter fundal: url ('img / twitter.png'); .icon-facebook background: url ('img / facebook.png'); .icon-youtube (fundal: url ('img / youtube.png'); Așa cum am menționat mai devreme, postcss-advanced-variables este o altă opțiune de plugin excelentă care se ocupă de variabile, bucle și condiționări toate într-o singură.
Am menționat anterior că acest plugin este preferința mea pentru manipularea condițiilor. Acest lucru se datorează faptului că am constatat că este capabil să facă față verificărilor condiționale mai complexe. Acesta include suport pentru @ dacă nu sintaxă, ceea ce înseamnă că puteți testa în mai multe condiții într-o singură bucată de cod.
După instalarea pluginului postcss-conditionals, testați-l adăugând acest cod în fișierul "src / style.css":
$ column_count: 3; coloana @ dacă $ column_count == 3 width: 33%; plutește la stânga; @else dacă $ column_count == 2 width: 50%; plutește la stânga; @else lățime: 100%;
Acest cod va verifica valoarea pe care am stabilit-o în variabilă @column_count și va afișa diferite valori de lățime și float în funcție de ceea ce găsește. Funcționează în același mod ca și codul folosit în tutorialul de preprocesare anterioară, dar acum că avem capacitatea de a utiliza @ dacă nu linii am reușit să creștem numărul de condiții pe care le testăm de la două la trei.
După recompilare, acest lucru vă va oferi:
.coloană lățime: 33%; plutește la stânga
Încercați să schimbați $ COLUMN_COUNT la 2 sau 1 și compilarea din nou pentru a vedea cum modifică ieșirea CSS.
Putem folosi, de asemenea, aceste tipuri de condiționalități bine în interiorul mixinelor, pentru care am adăugat mai devreme sprijinul. De exemplu, putem crea un mixin pentru a genera codul de aspect al coloanei, cum ar fi:
@ define-mixin coloane $ count @if $ count == 3 width: 33%; plutește la stânga; @elless dacă $ count == 2 width: 50%; plutește la stânga; @else lățime: 100%; . altă coloană @mixin coloane 2;
Acest lucru vă va oferi ieșirea:
.alta coloană (lățime: 50%; plutește la stânga;
Așa cum am menționat mai devreme, postcss-advanced-variables este o altă opțiune de plugin excelentă care se ocupă de variabile, bucle și condiționări toate într-o singură.
Într-un tutorial anterior am folosit postcss-calc, prin cssnano, pentru a ajuta la crearea de instanțe calc () utilizați mai eficient. În contextul preprocesării, cu toate acestea, poate fi foarte util ori de câte ori am putea dori să folosim matematică în foile noastre de stil.
Mergeți mai departe și instalați postcss-calc, apoi o vom testa făcând o generație de coloane pe care am adăugat-o mai eficient.
Acum folosim condiționări pentru a verifica dacă este vorba de mixin $ count argumentul este setat fie la 1, 2 sau 3 apoi trimiterea unei lățimi pre-calculate corespunzătoare. În schimb, vom folosi calc () pentru a extrage automat lățimea corectă pentru codul nostru de coloană, indiferent de numărul care este trecut prin mixin.
Adăugați la fișierul "src / style.css":
@ define-mixin columns_calc $ număr lățime: calc (100% / $ count); @if $ count> 1 float: left; . column_calculated @mixin columns_calc 2;
În loc să codificăm greu procentajul lățimilor de care avem nevoie pentru un anumit număr de coloane, îl calcăm acum.
Pluginul postcss-calc va fi convertit lățime: calc (100% / număr de dolari); într-o sumă statică, în funcție de valoarea trecută atunci când numim mixinul, în acest caz 2.
Recompilați codul dvs. și ar trebui să vedeți această ieșire:
.column_calculated width: 50%; plutește la stânga;
Notă: Ori de câte ori postcss-calc poate rezolva calc () la o valoare statică se va transmite în codul dvs. Dacă nu poate, nu va schimba nimic, astfel încât să puteți utiliza în continuare calc () pentru valori care trebuie să fie gestionate de browser în timpul rulării.
Pentru cuiburi, folosim același plugin ca în pachetul PreCSS, astfel încât să te poți referi la tutorialul anterior pentru informații complete despre sintaxă.
Instalați postcss-imbricate, apoi testați că totul funcționează corect prin compilarea acestui cod:
.meniu lățime: 100%; a text-decoration: none;
CSS-ul dvs. rezultat ar trebui să fie:
.meniu lățime: 100%; .menu a text-decoration: none;
Pentru extensii vom folosi pluginul postcss-sass-extend. Aceasta ne va da sintaxa diferită de utilizat decât cea pe care am acoperit-o în tutorialul nostru anterior de lucru cu PreCSS. În loc să se prelungească definirea cu @ define-extend nume_extensie ... ele sunt definite cu % extend_name ....
Ele sunt încă folosite cu aceeași sintaxă în esență @extend% extension_name;.
Rețineți că pluginul postcss-sass-extend se livrează de fapt cu PreCSS, dar presupun că nu se încarcă în mod implicit ca atunci când am încercat să folosesc sintaxa necesară pe care nu a compilat-o.
După instalarea postcss-sass-extend în proiectul dvs., testați-l cu următorul cod:
% rounded_button border-radius: 0.5rem; padding: 1em; lățimea latimei: 0.0625rem; stilul frontal: solid; .blue_button @extend% rotund_button; culoarea frontală: # 2F74D1; fundal-culoare: # 3B8EFF; .button @extend% rotund_button; culoarea frontală: # C41A1E; fundal-culoare: # FF2025;
Ar trebui să se compileze în:
.butonul albastru, butonul border-radius: 0.5rem; padding: 1em; lățimea latimei: 0.0625rem; stilul frontal: solid; .blue_button border-color: # 2F74D1; fundal-culoare: # 3B8EFF; .button border-color: # C41A1E; fundal-culoare: # FF2025;
Până acum am acoperit ce ar putea fi considerate caracteristicile principale comune celor mai preprocesoare. Cu toate acestea, există încă și mai multe plugin-uri disponibile pentru a oferi caracteristici suplimentare; unele dintre aceste caracteristici se găsesc în alte preprocesoare, iar altele trebuie să mergeți la PostCSS pentru a le găsi. Vom trece acum aceste opțiuni suplimentare pe scurt.
Abilitatea de a modifica culorile poate fi una dintre caracteristicile cele mai utile găsite în preprocesoare. Există de fapt câteva pluginuri de culoare pentru PostCSS, dar acestea sunt trei care se găsesc în mod special acasă într-o configurație de preprocesare. Acestea permit diferite transformări de culoare, inclusiv luminarea, întunecarea, saturarea, adăugarea de valori alfa și multe altele.
Funcționalitatea oferită de acest plugin poate fi comparată cu mixurile fără fir ale lui Stylus, prin care, mai degrabă decât folosind o sintaxă ca @mixin, definiți bucăți de cod în așa fel încât acestea să poată fi utilizate ulterior în cod în același mod ca o proprietate nativă, de ex..
/ * Definiți o proprietate * / dimensiune: $ size height: size; lățime: dimensiunea $; / * Utilizați-l ca pe o proprietate locală * / .square size: 50px;
Pluginul poate fi, de asemenea, utilizat pentru a redefini proprietățile native pentru a se potrivi nevoilor dvs..
Căutare de proprietăți este o caracteristică găsită în Stylus care poate fi foarte utilă. Vă permite să căutați valoarea unei proprietăți din același stil. De exemplu, este posibil să setați o marjă potrivită pentru a se potrivi cu stânga cu: margin-stânga: 20px; margin-dreapta: @ margin-left;
În timp ce cuiburile obișnuite pe care le-am acoperit de mai sus descarcă selectorii, pluginul postcss-nested-props desprinde proprietăți imbricate, de exemplu:
/ * Cod originale * /. Element border: width: 1px; stil: solid; culoare: #ccc; / * După procesarea * / .element border-width: 1px; stilul frontal: solid; culoare frontală: #ccc;
Potrivirea vă oferă o altă modalitate de a efectua verificări condiționate, de data aceasta utilizând potrivirea modelului Rust, ceva similar cu comenzile de comutare în JavaScript sau PHP. Acest lucru vă poate oferi o modalitate mai eficientă de a verifica mai multe condiții decât de a scrie multe @ altfel verificări.
Generarea de spioni CSS, o caracteristică populară în Compass, se poate face și prin pluginul postcss-sprites. Pluginul va scana CSS-ul pentru imagini, va combina aceste imagini într-o foaie de sprite și vă va actualiza codul așa cum este necesar pentru a afișa corect din noua foaie de sprite.
În prezent există o listă extrem de robustă de pluginuri de extindere a limbajului pentru care puteți alege, mai mult decât putem acoperi aici, prin urmare consultați lista completă la adresa: https://github.com/postcss/postcss#language-extensions
Pentru mulți, abilitatea de a scrie într-o sintaxă eficientă, eficientă (de obicei punct și virgulă) este unul dintre marile apeluri ale unor preprocesoare precum Stylus sau Sass. Versiunea recent lansată 5.0 a PostCSS suportă acum parseri personalizați, care vor permite sintaxele noi să fie acceptate. SugarSS trebuie să fie parserul sintaxei terse și discuțiile sunt deschise în prezent cu privire la modul în care va fi structurată această sintaxă.
PostCSS este încă relativ nou și este posibil să descoperiți că este ceva ce doriți să realizați cu preprocesorul personalizat pentru care în prezent nu există niciun plugin. Frumusețea acestui ecosistem modular este că aveți opțiunea de a vă rezolva singură problema creând plugin-ul dvs. Oricine poate să o facă și bariera la intrare este mult mai mică decât ați încercat și adăugați funcționalitatea proprie la Stylus, Sass sau LESS. Vom învăța cum într-un tutorial mai târziu.
Nu trebuie să alegeți între PreCSS și rulând propriul preprocesor dacă doriți să utilizați PostCSS. De fapt, puteți renunța la orice proces de preprocesare bazat pe PostCSS, dacă alegeți, în loc să îl utilizați unul lângă celălalt cu preprocesorul dvs. preferat.
În următorul tutorial vom învăța cum să folosim PostCSS împreună cu Stylus, Sass sau LESS. Ne vedem acolo!
