Share
În ultimele două tutoriale am analizat modalitățile de a utiliza PreCSS pe foile de stil completate pentru a îmbunătăți compatibilitatea și optimizarea browserului încrucișat, în esență ca post-procesor. În acest tutorial veți învăța să utilizați PostCSS ca un pre-procesor, în același mod în care ați folosi Stylus, Sass sau LESS.
Există două moduri principale pe care le puteți utiliza folosind PostCSS pentru preprocesare. Una dintre ele este să vă selectați toate pluginurile proprii pentru a adăuga funcția de preprocesor dorită, iar cealaltă este să instalați un pachet de pluginuri preselectate, astfel încât să fiți gata să mergeți imediat.
Vom începe cu cea mai rapidă și mai ușoară abordare, instalând pachetul excelent PreCSS de pluginuri, creat de Jonathan Neal. În tutorial, după aceea, vom trece la modul în care vă puteți pune împreună propriul dvs. preprocesor, folosind doar funcționalitatea dorită.
Acest tutorial va presupune că aveți un anumit grad de familiarizare cu caracteristicile frecvent întâlnite în preprocesoare precum Stylus, Sass sau LESS. Numai pentru că ne vom concentra Cum puteți utiliza aceleași tipuri de funcții prin PostCSS, mai degrabă decât ce caracteristicile de fapt fac. Cu toate acestea, chiar dacă nu ați mai folosit niciodată un preprocesor, acesta ar putea fi locul perfect pentru a începe.
Vom trece prin modul de configurare a unui proiect Gulp sau Grunt folosind PreCSS în secțiunea următoare, cu toate acestea, dacă doriți să faceți o comandă rapidă (doar pentru moment), puteți utiliza alternativ terenul de joc demonstrativ live pentru a încerca codul vom trece prin acest tutorial. Codul poate fi introdus în fereastra din stânga și se va compila automat pentru tine și va fi afișat în fereastra din dreapta.
PreCSS Live Editor: https://jonathantneal.github.io/precssPrimul 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 comandanpm install.
Fie că utilizați Gulp sau Grunt, instalați PreCSS în proiectul dvs. cu ajutorul comenzii:
npm instalează precss -save-dev
Dacă utilizați Gulp, adăugați această variabilă sub variabilele deja în fișier:
Accentsconagua
var precss = necesită ("precss");Acum, adăugați noul nume de variabilă în dvs. procesoare matrice:
var procesoare = [precss];
Faceți un test rapid că totul funcționează prin rularea comenzii gulp css verificând apoi că un nou fișier "style.css" a apărut în folderul "dest" al proiectului.
Dacă utilizați Grunt, actualizați procesoare obiect, care este imbricat sub Opțiuni obiect, la următoarele:
procesoare: [cer ('precss') ()]Faceți un test rapid că totul funcționează prin rularea comenzii zgâria postcss verificând apoi că un nou fișier "style.css" a apărut în folderul "dest" al proiectului.
Acum aveți tot ce aveți nevoie pentru a utiliza PreCSS instalat și gata de plecare. Acest lucru înseamnă că suntem gata să începem să trecem prin câteva dintre capabilitățile de pregătire preliminară ale PreCSS și cum pot fi utilizate.
În general, sintaxa PreCSS este cea mai asemănătoare cu cea a lui Sass. Cu toate acestea, folosește unele dintre abordările sale unice, pe care le vom acoperi în timp ce mergem împreună.
Notă: din cauza sintaxei Sass asemănătoare cu PreCSS, veți găsi că un marcator de sintaxă Sass va funcționa cel mai bine pentru dvs. în editorul dvs. de text preferat.
Nesting este ceva comun tuturor celor trei preprocesoare majore, adică Stylus, Sass și LESS, și este prezent și în PreCSS. Cresterea in PreCSS se face in acelasi mod ca in Sass si LESS, prin plasarea selectorilor in parantezele curbe ale altor selectori.
Abilitatea de a utiliza & simbolul de a avea selectorul parental duplicat în selectorul copil funcționează, de asemenea, în același mod în PreCSS ca și în alte preprocesoare.
Încercați să adăugați în fișierul "src / style.css" următorul cod imbricat:
.meniu lățime: 100%; a text-decoration: none; & :: înainte de content: ";
Compilați-vă CSS cu gulp css sau zgâria postcss și fișierul "dest / style.css" ar fi trebuit să evalueze codul imbricat în următoarele:
.meniu lățime: 100%; .menu a text-decoration: none; .menu :: înainte de content: ";
Variabilele reprezintă un alt tip de funcționalitate comună tuturor preprocesoarelor și sunt incluse în PreCSS. Singurul lucru care diferă de obicei între fiecare preprocesor este sintaxa pentru a denumi variabilele.
@ simbol și locul a : înainte de valoarea. $ simbol și loc un = semnați înaintea valorii. $ simbol și locul a : înainte de valoarea.În concordanță cu tendința PreCSS de a folosi sintaxa Sass, se plasează și ea $ înainte de numele variabilei și a : înainte de valoarea.
Încercați folosind variabilele PreCSS adăugând acest lucru în fișierul "src / style.css":
$ text_color: # 232323; corp culoare: $ text_color;
După recompilare, ar trebui să vedeți acest cod rezultat:
corp culoare: # 232323;
Condițiile, adică. dacă și altfel logica, sunt o caracteristică foarte puternică atât în Sass, cât și în Stylus. Mai putin ofera mixuri pazite, dar nu ofera acelasi nivel de putere. Condițiile sunt prezente în PreCSS și urmează aceeași sintaxă ca și Sass @dacă și @else.
Adăugați acest cod exemplu în fișierul "src / style.css":
$ column_layout: 2; coloana @if $ column_layout == 2 lățime: 50%; plutește la stânga; @else lățime: 100%;
În exemplul de mai sus avem un a .coloană clasa de ieșire în mod diferit în funcție de dacă vrem un layout o coloană, sau o structură de două coloane. Avem $ column_layout variabil setat la 2, adică ar trebui să vedem lățime: 50%; plutește la stânga; ieșire în clasa noastră.
Compilați fișierul dvs. și ar trebui să vedeți următoarele în fișierul "dest / style.css".
.coloană lățime: 50%; plutește la stânga
Notă: pluginul postcss-advanced-variables care oferă această funcție de condiționări este încă destul de nou și am întâlnit o ieșire neașteptată atunci când o folosesc pentru condiționări mai complexe, cu toate acestea, sunt sigur că va fi actualizat în viitorul apropiat.
Există un plugin alternativ care poate fi folosit pentru condiționalități numite postcss-conditionals. Vom explica modul în care puteți utiliza pluginul respectiv (dacă alegeți) în următorul tutorial, "Rolling your own Preprocessor".
@pentru și @fiecare Există două tipuri de bucle disponibile în PreCSS, @pentru și @fiecare bucle. Ambele utilizează o abordare care este la fel ca Sass. "Pentru" bucle vă permit să treceți printr-un contor numeric, în timp ce buclele "fiecare" vă permit să treceți printr-o listă de elemente.
@pentru bucleleÎn a @pentru există o variabilă "contra" care urmărește unde vă aflați în ciclism prin intermediul contorului dvs. numeric, în mod obișnuit setat ca $ i. De exemplu, atunci când iterăm de la 1 la 3, vor fi trei bucle; in primul $ i va fi egal 1, al doilea va fi egal 2 iar al treilea va fi egal 3.
Acest $ i contra variabilă poate fi interpolată în ambele selectori și reguli, care pot fi foarte utile pentru lucruri cum ar fi generarea nth-de-tip () regulile și lățimile de calcul.
Adăugați acest cod în fișierul "src / style.css" pentru a încerca o @pentru buclă:
@ pentru $ i de la 1 la 3 p: n-de-tip ($ i) margin-stânga: calc (100% / $ i);
După compilare, acest cod trebuie extins la:
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);
Notă: numere 1, 2 și 3 au fost introduse în fiecare dintre stilurile de mai sus.
@fiecare bucleleUn @fiecare buclă cicluri printr-o listă de elemente în loc de numere. Ca și în cazul @pentru buclele, variabila reprezentând elementul curent al bucla poate fi interpolată în selectori și reguli. Rețineți că pentru a interpola într-un șir, trebuie să introduceți un set de paranteze în numele variabilei în format $ (Var).
Utilizați PreCSS @fiecare buclele mergeți prin adăugarea următorului exemplu de cod:
$ social: twitter, facebook, youtube; @ pînă $ pictogramă în ($ social) .icon - $ (pictogramă) background: url ('img / $ (icon) .png'); După compilație, ar trebui să vedeți că a fost generat următorul CSS:
.icon-twitter fundal: url ('img / twitter.png'); .icon-facebook background: url ('img / facebook.png'); .icon-youtube (fundal: url ('img / youtube.png'); Sintaxa pentru crearea mixinului este un aspect al PreCSS care este puțin diferit de Sass.
În Sass, pentru a defini un mixin, folosiți sintaxa @mixin mixin_name ($ arg1, $ arg2) ... și apoi utilizați-l cu @ includeți numele mixin (pass_arg1, pass_arg2);.
În PreCSS, pe de altă parte, definiți un mixin cu sintaxa @ define-mixin mixin_name $ arg1, $ arg2 ... și utilizați-l cu @mixin mixin_name pass_arg1, pass_arg2;.
Adăugați acest exemplu î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; @mixin icon youtube, roșu;Pe compilație ar trebui să vedeți:
.button.twitter background-image: url ('img / twitter.png'); fundal-culoare: albastru; .button.youtube background-image: url ('img / youtube.png'); fundal-culoare: roșu; Notă: argumentele trecute prin mixin pot fi interpolate în selectori și șiruri cu aceeași abordare ca cea menționată în @fiecare buclele de mai sus; cu formatul $ (Var).
Pe lângă utilizarea mixinelor în modul descris mai sus, aceștia pot fi, de asemenea, setați să consume blocuri de conținut transmise la apelarea mixului. Acesta este, în esență, același proces ca și în cazul lui Sass " @conţinut.
De exemplu, modificați amestecul din exemplul de mai sus, plasând @ Mixin conținut unde doriți să apară un bloc de conținut, cum ar fi:
@ define-mixin pictogramă $ rețea, $ culoare .button. $ (rețea) background-image: url ('img / $ (rețea) .png'); fundal-culoare: $ color; @ Mixin-conținut; Atunci când un mixin încorporează @ Mixin conținut este folosit, trebuie să fie plasat cu paranteze curbate, mai degrabă decât pe o singură linie care se termină cu a ;, sau nu va reuși să compileze.
Actualizați codul astfel încât apelurile dvs. mixin să arate astfel:
@ mixin pictograma twitter, albastru (lățime: 3rem; @mixin icon youtube, roșu width: 4rem;
După compilare, acest lucru ar trebui să producă următorul cod - notați includerea lui lăţime conținut trecut prin fiecare utilizare a amestecului:
.button.twitter background-image: url ('img / twitter.png'); fundal-culoare: albastru; lățime: 3rem; .button.youtube background-image: url ('img / youtube.png'); fundal-culoare: roșu; lățime: 4rem; Extinde sunt similare cu mixins într-un sens, prin faptul că acestea sunt concepute pentru a vă permite să reutilizați blocuri de cod. Cu toate acestea, ideea din spatele "extinde" este de a crea un set de bază de cod pe care știți că îl veți folosi exact în același mod de mai multe ori pentru un anumit tip de element. Apoi, puteți extinde ulterior pe baza respectivă cu un cod suplimentar, care nu este implicit.
În PreCSS, sintaxa pentru a defini o extensie este @ define-extend nume_extensie ....
În fișierul "src / style.css", definiți o extensie care conține stilurile de bază pentru un buton rotunjit, după cum urmează:
@ define-extend rounded_button limita-radius: 0.5rem; padding: 1em; lățimea latimei: 0.0625rem; stilul frontal: solid;
Acest set implicit de stiluri este acum gata să fie extins cu cod suplimentar, de exemplu, pentru a seta lucruri de genul culoare de fundal și border-color. Acest lucru se face folosind sintaxa @extend extend_name; pentru a importa stilurile de bază definite în extensie.
Adăugați acest cod exemplu, sub codul pe care tocmai l-ați adăugat:
.butonul albastru @extend rounded_button; culoarea frontală: # 2F74D1; fundal-culoare: # 3B8EFF; .button @extend rounded_button; culoarea frontală: # C41A1E; fundal-culoare: # FF2025;
Unde @extend rounded_button; line, se va introduce întregul conținut al extensiei.
Compilați-vă stilurile și ar trebui să obțineți:
.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;
Rețineți, de asemenea, că stilurile comune .blue_button și .red_button clasa au fost combinate pentru eficiență.
Pluginul folosit pentru a insera foile de stil prin @import este aceeași pe care am acoperit-o în tutorialul anterior al acestei serii: Pentru Minificare și Optimizare. Pentru o analiză a modului în care funcționează capul și citiți secțiunea intitulată "Inline / Combine Files with @import".
În contextul utilizării PostCSS ca preprocesor, importurile devin și mai utile, deoarece acestea vă oferă opțiunea de a configura partiale, de la care s-ar putea să vă obișnuiți cu alte soluții de preprocesare. De exemplu, puteți configura un dosar "partials", separați-vă proiectul în fișiere parțiale logice discrete, apoi importați-le astfel:
@import "partials / _variables.css"; @import "partials / _utilities.css"; @import "partials / _mixins.css"; @import "partials / _extends.css";
Sper ca acum aveti cateva intrebari cu privire la cat de puternic PostCSS poate fi ca un preprocesor prin intermediul pachetului PreCSS. Pentru a rezuma ceea ce ne-am referit mai sus:
@ define-mixin mixin_name $ arg1, $ arg2 ... @mixin mixin_name pass_arg1, pass_arg2; @ Mixin conținut pot fi utilizate în același mod ca și Sass " @conţinut @ define-extend nume_extensie ...@extend extend_name;@import inlinează fișiere externe CSS, deosebit de utile pentru utilizarea partialelorPreCSS este un proiect fantastic, care reunește câteva plugin-uri excelente de extindere a limbajului și face preprocesarea bazată pe PostCSS destul de multă plug and play. Acesta oferă aproape toată funcționalitatea pe care majoritatea utilizatorilor de preprocesor au ajuns să o aștepte și este o metodă rapidă, "fără agitație" pentru a obține rulourile de preprocesor PostCSS.
Utilizarea PreCSS este una dintre cele două metode de preprocesare PostCSS pe care am menționat-o la începutul acestui tutorial. Cealaltă metodă este să vă configurați propriu preprocesor, selectând manual pluginurile de extensie a limbii care se potrivesc propriilor proiecte sau stilului de codare. Comerțul este un pic mai mult, dar în schimb obțineți libertatea de a pune împreună un preprocesor care funcționează oricum doriți să-l.
Veți învăța cum să faceți acest lucru în tutorialul următor, "Roll Your Preprocessor".
