Postprocessors - este un instrument relativ nou, care funcționează într-un mod similar preprocesorului C, în sensul că postprocessors afectează procesul de dezvoltare. Cu toate acestea, activitatea acestor instrumente pe de cealaltă parte a dezvoltării CSS.
În acest articol vă va prezenta elementele de bază ale post-procesare. Vei învăța cum funcționează, de ce să le folosească, și voi împărtăși câteva biblioteci și instrumente care vor fi utile.
Preprocessors sau postprocessors
Cu Sass / Adventului mai puțin din revoluția a avut loc în preprocesor. Aceste instrumente permit dezvoltatorilor să utilizeze variabile, bucle, funcțiile și hagfish în codul CSS. Standard CSS se transformă într-un limbaj aproape cu drepturi depline de programare cu funcționalitate extinsă.
După ce a scris codul CSS vine în postprocesare care automatizează cod. Acesta poate fi o extensie selectori de clasă sau versiune furnizor adăugarea automată a prefixe la anumite proprietăți.
Pur și simplu pune, există un limbaj preprocesor stiluri de tip Sass și mai mic, care convertește într-un cod CSS convențional. Postprocessors ia acest cod CSS și să automatizeze-l.
Mai jos am citat din postul său, de asemenea, luate de la această imagine. Cred că Stefan Baumgartner explică perfect diferența. „Preprocessors folosesc un limbaj compilat pentru CSS. Un postprocessors restabili codul CSS, astfel încât acesta funcționează bine în browsere moderne ".
Într-un fel, ambele instrumente sunt automatizate, doar moduri diferite. De exemplu, post-procesoare rezolva problema cea mai enervant - versiunea furnizor adăuga automat prefixe la noile proprietăți CSS3.
Cu toate acestea, același lucru se poate face cu ajutorul unor extensii Sass. Deci, ce este diferența? Iată un alt citat bun de la postul: „Nu este nici o preprocesoare și postprocessors. Toate aceste procesoare CSS sunt responsabile pentru scrierea si optimizarea ".
Teoretic, acest lucru are sens, dar comunitatea de dezvoltator până în prezent continuă să împartă cele două instrumente. Din acest motiv, am recomanda front-end dezvoltator de cel puțin citit despre postprocessors și știu că se poate face.
Conectarea Postprocessor
Aproape totul în postprocesare preferă să utilizeze PostCSS. Cu toate acestea, de către echipa a admis pe Twitter, că el vrea să schimbe numele, ca într-o coajă de nucă nu are sens.
PostCSS nu mai este doar pre- sau post-procesor. Acesta funcționează în ambele sensuri! Acest lucru explică citatul pe care l-am văzut mai sus, că toate instrumentele CSS sunt reduse la unul - la procesoare.
PostCSS folosește plugin-uri JS pentru a automatiza procesul de lucru cu CSS. Puteți scrie chiar propriile plugin-uri și biblioteca JS pentru a extinde PostCSS. Dacă doriți să se familiarizeze cu PostCSS, te duci printr-o lecție introductivă pe Smashing Magazine. Dacă știți deja ce Sass, vei înțelege repede.
Pentru a construi fluxul de lucru pentru pre- și postprocesare, creați mai întâi o listă de probleme:
adăugarea automată a prefixe în gradienților CSS;
Organizați în mod automat regulile CSS;
polyphyly introduce pentru proprietățile individuale;
generarea de imagini pentru fundal.
Vă rugăm să rețineți că toate acestea pot fi rezolvate în preprocesor și Postprocessor. Este important să se înțeleagă că pre și postprocesare în CSS fuziona rapid într-una singură.
Nu rupe scopul în diferite stadii de prelucrare, mai bine fac o listă de obiective și să le potrivesc pentru uneltele potrivite.
postprocessors TOP
În această secțiune, nu am încercat să menționez extensiile, prea multe dintre ele în Sass și PostCSS. Pentru a fi sincer, am fi putut face, iar aceste biblioteci, dar vreau să-ți arăt o alternativă la soluții mai specifice.
Dacă lucrați cu Node.js, nu poți face fără Pleeease. Există mai multe caracteristici standard de prelucrare CSS, cum ar fi importul de fișiere, variabile / functii, minification automat și suport folbekov pentru noi tipuri de elemente SVG.
Site-ul este un site interactiv, unde puteți încerca biblioteca online, fără a descărca.
Îmi amintesc de un timp când IE6 a fost o ambuscadă completă. Este plăcut să realizăm că dezvoltarea în conformitate cu IE sa îmbunătățit, dar nu cu mult. Aș fi fericit să vă informeze că IE complet din circulație, dar nu este.
Din fericire, există Bless CSS - instrument special, identificarea posibilelor probleme cu IE în stiluri și crearea de soluții folosind post-procesare. Binecuvântează care rulează pe Node.js și este foarte potrivit pentru NPM / Gulp.
bibliotecă foarte misto, cu care puteți crea în CSS funcționalitatea avansată, care nu este încă acceptată. CSSNext activează suport CSS4 funcții cum ar fi gri (), care este în prezent reprezentat doar de proiectele W3C.
În opinia mea, această bibliotecă nu este pentru toată lumea. Această bibliotecă unică, care rezolvă sarcini non-standard. Dar nu poți să te joci cu noi caracteristici CSS4, care sunt încă convertite în sintaxa corespunzătoare pentru CSS3.
În cazul în care principala problema - este suportul în browser-ul, aveți nevoie de Stylecow. Este o bibliotecă puternic, care vă permite să scrie codul CSS pur pentru browser-ul dumneavoastră preferat. Apoi, puteți deschide un prompt de comandă prin nodul, și codul CSS este actualizat cu toate browserele.
Încărcați Stylecow posibil să GitHub. la pachet cu ea veți obține o documentație detaliată.
-prefix-free
Și, în sfârșit, vreau să împărtășesc bibliotecă--prefix gratuit. O altă bibliotecă de preferat pentru dezvoltarea CSS. Puteți să-l utilizați pentru a scrie proprietatile fara prefixe. Toată lumea vrea să folosească proprietăți moderne, CSS, cum ar fi animație și gradienți, dar nimeni nu vrea să copy-paste codul manual.
Cu acest plugin nici nu trebuie să alunge codul CSS prin intermediul computerului post-procesor. Plugin-ul poate fi, de asemenea, operate în browser-ul unui utilizator și să actualizeze automat fișierele CSS.
Pentru postprocesare locală poate fi mai bine pentru a alege Autoprefixer. PostCSS care este construit în bibliotecă. De aceea am spus că, dacă utilizați mai puțin sau, Sass cu PostCSS, atunci va avea tot ceea ce este necesar pentru o dezvoltare impresionantă în CSS.
concluzie
Post-procesare - este expresie mai popular, decât tehnologia, în ciuda faptului că are loc în dezvoltarea CSS. Întregul proces de scriere a unui cod CSS modern, îmbunătățit radical datorită acestor instrumente. Pot recomanda doar să caute mai departe pentru a găsi cel mai potrivit instrument.
Revizie: Echipa webformyself.
Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram