Share
Bun venit la "PostCSS Deep Dive: Ghidul QuickStart". De-a lungul acestor posturi din seriile noastre, ne vom uita să vă începem cu PostCSS în cele mai rapide și eficiente căi posibile.
În acest tutorial vom începe cu opțiuni de configurare instantanee, astfel încât să puteți lucra cu PostCSS în doar câteva minute de acum. În prezent, avem două opțiuni de configurare instantanee: CodePen și Prepros.
Să vedem cum puteți să le folosiți pe amândouă pentru a începe imediat să jucați cu PostCSS.
Dacă sunteți nou-născut în PostCSS, cel mai rapid mod de a începe să îl utilizați este via CodePen.
CodePen are acum suport pre-integrat pentru PostCSS, împreună cu următoarele pluginuri și pachete:
Această selecție de pluginuri vă oferă suport pentru sintaxa viitoare, funcționalitatea Sass, eliminarea comentariilor și abilitatea de a scrie codul de transformare în sintagmă.
Începeți prin a merge la CodePen și creați un stilou nou. Apoi faceți clic pe pictograma roată mică din stânga sus a ferestrei CSS pentru a afișa panoul de setări.
Din meniul derulant etichetat Preprocesor CSS selectează PostCSS opțiune. Puteți, de asemenea, să bifați butonul radio etichetat Autoprefixer pentru a include pluginul respectiv.
După efectuarea acestei selecții, ar trebui să vedeți acum un mic buton negru aflat sub meniul drop-down Aveți nevoie de un add-on?. Faceți clic pe acel buton și se va deschide un panou care afișează o listă cu @ reguli. Copiați și lipiți oricare dintre acestea @ rulează în panoul dvs. CSS pentru a începe să utilizați pluginul PostCSS corespunzător.
Să vedem un exemplu despre modul în care am putea folosi pluginurile PostCSS disponibile cu CodePen, începând cu cssnext ambalaj.
În partea de sus a panoului CSS, adăugați acest cod pentru a specifica că doriți să utilizați cssnext:
@use cssnext;
Cu această linie, veți avea acum posibilitatea de a utiliza toate funcțiile descrise la http://cssnext.io/features. Vom folosi funcțiile de variabilă și de culoare CSS pentru a seta o culoare pe fundalul corpului.
În primul rând, am a :rădăcină și definiți o variabilă CSS în ea. Adăugați acest lucru în panoul CSS:
: rădăcină --body_bg_color: negru;
Acum putem folosi acea variabilă în CSS adăugând codul de mai jos:
corp fund: var (- body_bg_color);
În acest moment ar fi trebuit să văd că fundalul stiloului tău devine negru. De asemenea, puteți face clic pe Vizualizați compilația din partea de sus a panoului CSS pentru a vedea codul care a fost generat:
"View Compiled" care arată codul după procesarea cu PostCSSAcum, să zicem că găsim un pic negru greu pentru a face față unui design pe care lucrăm și vrem să-l ușuram puțin. Pentru a regla culoarea, putem folosi viitorul sintaxei care permite modificarea culorii.
Pe linia care declară --body_bg_color variabilă, modificați valoarea de la negru la:
--body_bg_color: culoare (negru (20%));
Această funcție de culoare luminează culoarea neagră cu 20%. Ar trebui să vedeți acum că fundalul stiloului dvs. a fost modificat la un gri închis.
Oricare dintre pluginurile acceptate poate fi folosit pe CodePen în același mod:
Accentsconagua
@ regulă pentru pluginul pe care doriți să îl utilizațiIată demo-ul (vizibil fără demnitate) pe care tocmai l-am construit:
Este posibil ca Prepros să nu aibă gama de suport pentru plugin-uri pe care o are CodePen, dar include activarea fără probleme a celor două Autoprefixer și cssnext. Prepros poate fi descărcat de la https://prepros.io.
Pentru a începe, trageți și plasați un proiect care include un fișier CSS în interfață. Apoi faceți clic pe numele fișierului CSS pentru a deschide un panou de setări din partea dreaptă. De aici, puteți bifa casetele etichetate AutoPrefix CSS pentru a permite Autoprefixer și Activați Cssnext pentru a folosi cssnext:
Veți putea acum să utilizați toate funcționalitățile pachetului de plugin-uri cssnext, precum și să aveți autopsia automată CSS.
Bine, să rezumăm rapid ceea ce am tratat mai sus:
@ reguli pentru a activa pluginuri specificeCodePen și Prepros sunt două modalități excelente de a intra și funcționa cu PostCSS aproape instantaneu. Cu toate acestea, dezavantajul este că nu puteți decide ce pluginuri să utilizați.
Când sunteți gata să utilizați puterea completă a PostCSS, veți dori să alegeți și să configurați propria selecție de pluginuri. Probabil cel mai accesibil mod de a face acest lucru este prin crearea de proiecte personalizate PostCSS prin alergatori de sarcini, cum ar fi Gulp sau Grunt.
Veți învăța cum să procedați în continuare în următoarele două tutoriale: "Ghid de pornire rapidă: Gulp Setup" și "Ghid de pornire rapidă: setarea de bază".
