CSS-om može biti teško upravljati, posebno za bilo koje web mjesto razumne veličine. Zatražite pomoć s ovim pretprocesorom.

Recimo da naučite o stvarno super CSS značajci, kao što je gniježđenje. Ali kada krenete i isprobate, shvatit ćete da je podrška užasna i da će proći godine prije nego što je konačno možete koristiti. To je prije bio veliki problem u CSS-u sve do uvođenja predprocesora kao što je PostCSS.

Saznajte kako vam PostCSS omogućuje korištenje modernog i budućeg CSS-a danas tijekom razvoja. Saznat ćete što je točno PostCSS, kako ga možete koristiti i koji je najbolji način da iskoristite njegove značajke.

Postavljanje projekta

Idite u praznu mapu, stvorite datoteku pod nazivom index.html i dodajte sljedeće HTML oznake u datoteku:

html>
<htmljezik="en">
<glava>
<vezarel="list stilova"href="src/styles.css">
glava>


<tijelo>
<str>stavakstr>
<div>divdiv>
tijelo>
html>

Ovaj HTML dokument prikazuje odlomak i element. Također uvozi datoteku lista stilova pod nazivom stilovi.css koji je unutar src mapa. Stvorite datoteku u src mapu i uključite sljedeća pravila CSS stila:

instagram viewer 
tijelostr {
boja: naranča;
}
tijelodiv {
boja: plava;
}
tijelo {
prikaz: rešetka;
}

Ovaj CSS stilizira boju oba elementa na stranici i stvara rešetkasti izgled. Većina preglednika podržava normalnu CSS sintaksu poput ove. Ali kada imate pogled na noviju sintaksu, morat ćete unijeti PostCSS.

Stvaranje Node.js projekta i instaliranje PostCSS-a

Jednostavno rečeno, PostCSS vam omogućuje pretvaranje modernog CSS-a u nešto što većina preglednika može razumjeti; proces općenito poznat kao transpiliranje. Ovo je savršeno ako želite isprobati nova, eksperimentalna ili nestandardna CSS svojstva u svom kodu koja glavni preglednici možda ne podržavaju.

PostCSS također nudi bogat ekosustav JavaScript dodataka koje možete instalirati kako biste omogućili određene značajke, kao što je CSS minijatura, podrška za boje i podrška za linting.

Da biste koristili PostCSS, prvo što trebate učiniti je inicijalizirati novi Node.js projekt:

npm init -y

Ova naredba će generirati datoteku package.json koja sadrži zadane vrijednosti za vašu aplikaciju.

Zatim instalirajte PostCSS i PostCSS CLI. Drugi paket vam omogućuje pokretanje PostCSS-a iz naredbenog retka:

npm i --save-dev postcss postcss-cli

The --save-dev zastava instalira oboje npm paketi kao dev ovisnosti; samo ćete koristiti PostCSS i njegove dodatke za obradu CSS koda tijekom razvoja.

Da biste počeli koristiti PostCSS putem sučelje naredbenog retka, idite u svoj paket.json datoteku i stvoriti jednostavan izgraditi: css naredba za transpiliranje s PostCSS-om:

"skripte": {
"izrada: css": "postcss src/styles.css --dir dest -w"
}

Ova naredba će uzeti vaš goli CSS (pohranjen u src/styles.css), transpilirajte kod, a zatim ga ispišite u odredište mapa. Pokretanje npm izrada: css naredba stvara ovu mapu i popunjava je s stilovi.css datoteka koja sadrži kod čitljiv pregledniku.

Kada uvozite svoj CSS u HTML, pobrinite se da uvozite iz odredišne ​​mape u koju kompajlirate svoj CSS, a ne iz izvorne mape iz koje PostCSS kompajlira. Ovo je u našem slučaju dist mapu, a ne src mapa.

Ako otvorite svoje web mjesto u pregledniku, vidjet ćete da ono i dalje pristupa CSS-u. Kad god promijenite izvornu datoteku, PostCSS će ponovno kompajlirati kod i promjene će se odraziti na web stranici.

Korištenje PostCSS dodataka

Ima ih na stotine PostCSS dodaci za dodavanje prefiksa, linting, podršku za novu sintaksu i desetke drugih značajki u PostCSS. Nakon što instalirate PostCSS dodatak, aktivirate ga unutar postcss.config.js datoteka — JavaScript datoteka koju možete koristiti za postavljanje svih konfiguracija za PostCSS.

Instalirajte cssnano PostCSS dodatak sa sljedećom naredbom:

npm i --save-dev cssnano

Još jednom, trebate samo spremiti ove ovisnosti kao ovisnosti o razvojnim programerima. Razlog je što se sve to događa dok se razvijate. Ne trebate PostCSS ili bilo koji od njegovih dodataka nakon puštanja stranice u proizvodnju.

Da biste koristili novoinstalirani cssnano dodatak, trebate dodati sljedeći kod unutar postcss.config.js datoteka:

konst cssnano = zahtijevati("cssnano")
modul.izvoz = {
 dodaci: [
 cssnano({
 unaprijed postavljeno: 'zadano'
 })
 ]
}

Sada ako se vratite na terminal i ponovno pokrenete naredbu za izgradnju, to će minimizirati izlazni CSS (tj. učiniti kod što manjim za čovjeka). Dakle, kada gurnete na mjesto spremno za proizvodnju, to će vaš CSS učiniti što manjim.

Korištenje modernih značajki poput gniježđenja

Pretpostavimo da želite koristiti sintaksu ugniježđivanja u svojoj tablici stilova, pa zamijenite blok odlomka src/styles.css s ovim:

tijelo {
 & str {
boja: naranča;
 }
}

Ovaj kod je isti kao verzija u vašem početnom kodu. Ali to će izazvati pogrešku jer je sintaksa vrlo nova i većina web preglednika je ne podržava. Možete omogućiti podršku za ovu sintaksu s PostCSS-om tako da instalirate postcss-preset-env uključiti.

Dodatak sastavlja hrpu različitih dodataka za rukovanje CSS-om na temelju faze u kojoj se nalazi. Faza 0 predstavlja super eksperimentalne značajke koje možda neće ni dospjeti u CSS. Dok je faza 4 za jezične značajke koje su već dio CSS specifikacije.

Prema zadanim postavkama sadašnjost-okvir koristi značajke faze 2 (koje će najvjerojatnije ući u CSS). Ali možete promijeniti stupanj na što god želite u konfiguracijskoj datoteci.

Da biste instalirali dodatak, pokrenite sljedeću naredbu:

npm i --save-dev postcss-preset-env

Zatim u vašem postcss.config.js datoteku, trebate uvesti dodatak i registrirati ga:

konst cssnano = zahtijevati("cssnano")
konst postcssPresetEnv = zahtijevati("postcss-preset-env")
modul.izvoz = {
 dodaci: [
 cssnano({
 unaprijed postavljeno: 'zadano'
 }),
 postcssPresetEnv({ pozornici: 1})
 ]
}

Trebali biste proći samo fazu novog CSS koda koji namjeravate koristiti. U ovom slučaju, pretpostavljamo da je značajka gniježđenja u fazi 1. Kada ponovno pokrenete naredbu za izgradnju i provjerite preglednik, vidjet ćete da je kompajliran ugniježđeni kod u standardni CSS koji preglednik može razumjeti.

Korištenje PostCSS-a s okvirima

Ručno konfiguriranje PostCSS-a može biti malo mučno. Zbog toga gotovo svi moderni okviri dolaze s alatima za grupiranje (npr. Vite, Snowpack i Parcel), a ti će alati imati ugrađenu podršku za PostCSS. Čak i ako ne, postupak dodavanja PostCSS podrške nevjerojatno je jednostavan.

Uvijek zapamtite da Vite i većina drugih bundlera koriste Sustav modula ES6, a ne CommonJS. Da biste to zaobišli, morate koristiti uvoz izjava umjesto zahtijevati () u vašem postcssconfig.js datoteka:

uvoz cssnano iz"cssnano"
// Ovdje ide konfiguracijski kod

Dokle god imate instalirane dodatke, sve će raditi kako treba.

Saznajte više o SaSS-u

PostCSS je samo jedan od desetaka CSS predprocesora koji su trenutno dostupni. Jedan od njih je SaSS, što je kratica za sintaktički izvrsne stilove.

Učenje korištenja drugog glavnog pretprocesora može dobro doći kao CSS programer.