Share
Așa cum ați fi adunat de la intrările anterioare din această serie, PostCSS este vorba despre plugin-uri. Plugin-urile pe care le alegeți vă vor defini cu adevărat experiența cu PostCSS.
Având în vedere că acestea sunt atât de integrale și fundamentale, înainte de a trece la crearea efectivelor de foi de stil prin PostCSS, vom examina modul în care puteți explora ecosistemul plugin PostCSS. Prin aceasta veți obține, de asemenea, o vizualizare în cât de puternică este PostCSS și cum oferă funcționalitate care nu poate fi creată în mod egal prin orice alt mijloc existent.
Vom acoperi unde puteți merge pentru a păstra fișierele cu privire la cele mai recente și cele mai bune pluginuri, categoriile în care aceste pluginuri intră în mod obișnuit și considerente privind modul de încărcare a tuturor acestor pluginuri în proiecte în mod logic.
Pe măsură ce începeți să lucrați cu PostCSS, există trei locații pe care veți dori să le păstrați pentru că ați găsit suficiente pluginuri.
Pagina principală a PostCSS Github repo în prezent menține o listă cuprinzătoare de categorii de pluginuri. Această listă are tendința de a fi actualizată frecvent, astfel încât este un loc destul de fiabil pentru a merge și a vedea ce pluginuri sunt disponibile pentru diferite aspecte ale dezvoltării.
https://github.com/postcss/postcss#pluginsUn plus relativ nou și foarte binevenit în lumea PostCSS este site-ul postcss.parts, care oferă un catalog de căutare a pluginurilor PostCSS.
http://postcss.partsÎn acest moment, PostCSS văd un plugin nou și interesant fiind lansat în mod regulat. Cele două locații de mai sus nu evidențiază pluginuri noi, astfel că dintr-o privire nu veți ști dacă există elemente pe care nu le-ați văzut înainte. Din acest motiv, este o idee minunată de a urmări sau de a vizita frecvent @PostCSS pe Twitter.
https://twitter.com/postcssLățimea de funcționalitate în plugin-uri care pot funcționa cu PostCSS este mare, deci este o idee grozavă de a avea o introducere în general tipuri de plugin-uri pe care probabil veți întâlni înainte de a vă deplasa în încercarea oricăror dintre ele.
Natura fundamentală a PostCSS este că oferă procesare modulară CSS. Ca atare, pluginurile individuale sunt încurajate să acopere doar un set de funcționalitate mic, bine definit. Pluginurile multifuncționale megalitic care fac totul odată sunt descurajate.
Acestea fiind spuse, uneori doriți să includeți o listă lungă de funcționalități într-un proiect și, mai degrabă, nu ar trebui să instalați și să configurați în mod individual douăsprezece pluginuri diferite. Aici intră "pachetele". Pachetele reunesc mai multe pluginuri modulare sub o umbrelă tematică, permițându-le tuturor să fie instalate și desfășurate imediat.
De exemplu, pachetul PreCSS combină nouă pluginuri separate PostCSS pentru a crea funcții asemănătoare Sass. Pachetul cssnano utilizează în jur de douăzeci de pluginuri PostCSS pentru a oferi miniaturi și optimizări CSS. Folosind aceste pachete vă salvați trebuie să instalați și să încărcați manual fiecare plugin.
Viitorul CSS este vorba de a vă permite să scrieți o sintaxă pe care o știm că vine în spec. W3C, dar este posibil să nu fie suportată pe deplin în browsere.
De exemplu, este posibil să doriți să utilizați notația hexadecimală de opt sau patru cifre pentru a crea culori opace. Pentru a genera un albastru ușor transparent, puteți folosi un cod de culoare ca # 0000ffcc, sau forma sa abreviată # 00fc, și rulați plugin-ul postcss-color-hex-alpha pentru a converti acest format în formatul acceptat pe scară largă rgba (0, 0, 100%, 0,8).
Prezenta cea mai proeminenta in viitorul CSS al PostCSS este pachetul cssnext, care aduce la masa o multitudine de CSS viitoare. Cu toate acestea, în prezent, dezvoltatorul său, Maxime Therouin, ia pachetul printr-o tranziție majoră în modul în care funcționează. Ca atare, vom avea incendiu în a vă aduce un viitor tutorial CSS până când tranziția va fi finalizată.
În cazul în care viitorul CSS este de a face lucrul de mâine de mâine în browserele de astăzi, backbacks sunt, în esență, despre a face codul de astăzi de lucru în browserele de ieri. Într-o lume perfectă, nu ar trebui să ne gândim niciodată la browserele vechi și învechite, însă realitatea este că există încă unele proiecte pentru care este esențială susținerea browserelor moștenite. Categoria de rezervă a pluginurilor PostCSS poate ajuta acolo unde este cazul.
Toate aceste plugin-uri rulează hands-free, prin care vreau să spun că vă scrieți codul în conformitate cu standardele actuale, iar plugin-urile vor găsi cod care are nevoie de mers înapoi și le inserează automat după cum este necesar.
De exemplu, aveți posibilitatea să adăugați culori plate ca arme de rezervă pentru RGBA () culorile de la postcss-color-rgba plugin-ul, sau adăugați backend-uri compatibile IE8 pentru opacitate prin pluginul postcss-opacity. Cel mai bine cunoscut dintre aceste pluginuri este Autoprefixer, care adaugă prefixele furnizorilor după cum este necesar, pe baza datelor de la CanIUse.com.
Veți afla mai multe despre pluginurile de rezervă în următorul tutorial "Pentru Cross Browser Compatibility" din această serie.
Extensiile de extindere a limbii adaugă funcționalitate CSS care altfel nu ar fi acolo. Prin comparație, ați putea considera majoritatea preprocesoarelor ca fiind complet compuse din extensii de limbă. De fapt, utilizatorii Sass, Stylus și LESS se vor simți probabil acasă cu numeroase extensii de limbaj PostCSS, cum ar fi cele care adaugă mixuri, variabile, condiționalități, bucle, cuiburi, extensii și așa mai departe.
Deoarece PostCSS este complet flexibil, însă, există și extensii de limbă care oferă funcționalități care nu se găsesc în mod obișnuit în preprocesoare. De exemplu, plugin-ul postcss-bem adaugă o sintaxă specială pentru crearea CSS care urmează metodologia BEM / SUIT (mai multe despre aceasta într-un tutorial ulterior). Pluginul postcss-define-property vă permite să vă creați proprietățile personalizate sau să redefiniți proprietățile native. Și plugin-ul postcss-match vă permite să utilizați nu numai condiționalități, ci și logica de potrivire a tipului în codul dvs..
Cu această varietate toate indicațiile sunt că PostCSS se va maturiza până la punctul în care poate oferi o mare parte din funcționalitatea pe care mulți dintre noi o caută în preprocesoare, dar și o funcționalitate considerabilă dincolo de aceasta.
Multe dintre pluginurile color disponibile în prezent pentru PostCSS se ocupă cu transformarea culorilor dintr-un format în altul, de exemplu de la # hex.a la RGBA (), hcl (H, C, L) la #rgb, sau pantone la #rgb. În plus, unele dintre cele mai utile pluginuri se ocupă de manipularea culorilor, cum ar fi amestecarea a două culori sau diminuarea luminozității sau întunericului acestora.
Un favorit particular al meu îți permite să iei schema de culori existentă, apoi să dai o versiune așa cum ar părea oamenilor cu forme specifice de orbire a culorilor. Nu este nimic asemănător cu experiența de primă mână pentru a vă ajuta să măsurați cât de accesibile sunt desenele dumneavoastră.
Vom detalia pluginurile de culoare în tutorialele noastre de preprocesare, stenografie și "bunătăți".
Această categorie de pluginuri se ocupă de o mulțime de sarcini de optimizare, cum ar fi împachetarea datelor Base64, generarea foilor CSS sprite și optimizarea SVG. De asemenea, veți găsi alte câteva tipuri de instrumente de imagine și fonturi, cum ar fi conversia automată SVG la PNG pentru IE8, generarea automată a imaginilor WebP și includerea pentru browserele de sprijin, @ Font-face comenzi rapide, comenzi rapide pentru retina și multe altele.
Descoperind că sistemele de grilă ar putea fi scrise în PostCSS, fără a fi nevoie să încarce foi de stil pre-scrise sau să utilizeze mixere preprocesor, a fost primul lucru care mi-a deschis ochii cu adevărat cu privire la cât de puternic este PostCSS. Am crezut anterior că PostCSS a fost în primul rând cu privire la filtrarea și modificarea CSS existente, cu toate acestea sistemele de grilă arată că pot fi folosite pentru a crea întregi biblioteci de stiluri externe.
Există în prezent trei sisteme de rețea disponibile pentru PostCSS:
Pluginurile de optimizare PostCSS se încadrează în două categorii generale: minificarea și modificarea codului. Prin intermediul acestor pluginuri puteți efectua sarcini de minificare, cum ar fi eliminarea spațiilor libere și a comentariilor, și puteți de asemenea să efectuați modificări mai complexe, cum ar fi combinarea interogărilor media potrivite, inlining @import stiluri, optimizarea greutății fonturilor, eliminarea regulilor goale sau duplicate și așa mai departe.
Vom acoperi mai multe despre această categorie de pluginuri PostCSS în viitorul tutorial "Pentru miniere și optimizare".
Ca utilizator de preprocesor, întotdeauna am găsit unul dintre cele mai mari avantaje a fost abilitatea de a reduce cantitatea de cod pe care am avut de scris prin utilizarea variabilelor și mixurilor. Prin intermediul PostCSS, am descoperit mijloace mai ample de a face scrierea codurilor mai eficientă prin intermediul listei lungi de plugin-uri rapide și scurte disponibile.
Aveți posibilitatea să alegeți să utilizați o scurtă durată pentru proprietăți, fie să definiți propria dvs., fie să folosiți stenograma existentă, de exemplu w in loc de lăţime, h in loc de înălţime si asa mai departe. Puteți ieși @ Font-face cod, transforma cod, triunghiuri și cercuri, toate într-o singură linie. Și puteți scurta tot felul de sarcini obișnuite, inclusiv coafura de legătură, centrarea, fixarea clară, poziționarea, dimensionarea, spațierea și afișarea codurilor de culoare.
Vom accesa aceste plugin-uri în profunzime în tutorialul "Shortcuts and Shorthand".
PostCSS poate fi de asemenea folosit pentru mai mult decât transformarea CSS, dar poate fi folosit și pentru a oferi feedback în timp ce dezvoltați CSS. Unele dintre pluginurile de analiză și raportare disponibile includ un linter pentru codul BEM / SUIT, un plugin care vă oferă o defalcare a codului dvs. prin intermediul CSSstats, "DoIUse" pentru a vă informa despre modul în care codul dvs. se aliniază cu datele de la I Can Use și un generator de fișiere Modernizr.
Există câteva pluginuri postCSS care nu se potrivesc într-o anumită categorie, dar sunt prea bune pentru a trece peste ele. De exemplu, avem ghid post-stil care generează automat un ghid de stil bazat pe CSS. Există, de asemenea, pluginul rtlcss, folosit de WordPress, care generează o versiune din dreapta spre stânga a foii de stil.
Vom acoperi câteva dintre aceste plugin-uri mari în tutorialul "Diverse bunuri".
Categoria "distracție" include pietre precum postcss-spiffing, care vă permite să utilizați ortografia Regatului Unit, de exemplu culoare in loc de culoare, și o sintaxă bine manevrată, cum ar fi !Vă rog in loc de !important.
Este puțin probabil să vedeți pluginurile acestei categorii utilizate într-un proiect real, totuși un beneficiu real pe care îl oferă este de a acționa ca exemple ușor de înțeles pentru dezvoltatorii plugin-ului aspirant. Fiind destul de simple și scurte, ele sunt perfecte pentru a arunca o privire înăuntru și pentru a vedea ce este esențial pentru modul în care se fac pluginurile PostCSS.
Unul dintre principalele considerente pe care trebuie să le faceți atunci când încărcați matricea de pluginuri PostCSS este ordinea în care le executați. Va trebui să întrerupeți și să vă gândiți prin lista dvs., determinând dacă un plugin ar trebui să ruleze după altul pentru a face ceea ce doriți.
De exemplu, este posibil să utilizați un plugin ca postcss-simple-vars care adaugă suport pentru variabile și îl puteți utiliza pentru a stoca un RGBA () valoare ca aceasta:
/ * cod sursă * / $ culoare: rgba (0, 0, 0, 0.5); .style background: $ color; / * se compilează la: * / .style background: rgba (0, 0, 0, 0.5);
S-ar putea să doriți, de asemenea, să utilizați un plugin ca postcss-color-rgba-fallback pentru a adăuga un hexazoc plat ca rezervă, oferindu-vă:
/ * se compilează la: * / .style background: # 000; fundal: rgba (0, 0, 0, 0,5);
În acest caz, va trebui să vă asigurați că ați rulat pluginul variabilelor inainte de pluginul de rezervă.
Dacă ați executat plugin-ul de rezervă mai întâi, el ar găsi doar fundal: $ color; în CSS și nu știu că a existat o RGBA () valoare pentru care să lucreze.
Cu toate acestea, prin rularea plugin-ului variabilelor în primul rând, atunci când plugin-ul fallback rulează, acesta va găsi fundal: rgba (0, 0, 0, 0,5); și mergeți mai departe și adăugați în rezervă cerută.
Ordinea de încărcare pentru plugin-uri este ceva care se va schimba cu fiecare set de plugin-uri, așa că puteți găsi că trebuie doar să faceți puțină experimentare uneori pentru a obține totul de lucru împreună frumos.
Pentru a rezuma explorarea pluginurilor PostCSS:
Am finalizat ghidul nostru "Quick Start" la PostCSS și suntem pregătiți să sarăm în practică și să începem să producem un cod CSS real.
În următorul tutorial vom începe să utilizăm PostCSS pentru a genera cod compatibil încrucișat prin introducerea automată a prefixelor furnizorilor și un număr de rezervări pentru proprietăți cu browserele vechi, în special IE8.
Ne vedem în tutorialul următor!
Accentsconagua