CSS je lahko težavno upravljati, zlasti za katero koli spletno mesto razumne velikosti. Pomagajte si s tem predprocesorjem.

Recimo, da se naučite o res kul funkciji CSS, kot je gnezdenje. Toda ko ga poskusite, ugotovite, da je podpora grozna in da bodo minila leta, preden ga boste lahko končno uporabili. To je bila velika težava v CSS do uvedbe predprocesorjev, kot je PostCSS.

Naučite se, kako vam PostCSS omogoča uporabo sodobnega in prihodnjega CSS že danes med razvojem. Natančno boste izvedeli, kaj je PostCSS, kako ga lahko uporabljate in kako najbolje izkoristiti njegove funkcije.

Nastavitev projekta

Pomaknite se v prazno mapo, ustvarite datoteko z imenom index.html in v datoteko dodajte naslednje oznake HTML:

html>
<htmljezik="en">
<glavo>
<povezavarel="stylesheet"href="src/styles.css">
glavo>


<telo>
<str>odstavekstr>
<div>divdiv>
telo>
html>

Ta dokument HTML upodobi odstavek in element. Uvozi tudi datoteko slogovnega lista z imenom styles.css ki je znotraj src mapo. Ustvarite datoteko v src mapo in vključite naslednja pravila sloga CSS:

telostr {
barva: oranžna;
}
telodiv {
barva: modra;
}
telo {
zaslon: mreža;
}

Ta CSS stilizira barvo obeh elementov na strani in ustvari mrežno postavitev. Večina brskalnikov podpira običajno sintakso CSS, kot je ta. Toda ko boste imeli pogled na novejšo sintakso, boste morali vnesti PostCSS.

Ustvarjanje projekta Node.js in namestitev PostCSS

Preprosto povedano, PostCSS vam omogoča pretvorbo sodobnega CSS v nekaj, kar lahko razume večina brskalnikov; postopek, splošno znan kot transpilacija. To je popolno, če želite preizkusiti nove, eksperimentalne ali nestandardne lastnosti CSS v vaši kodi, ki jih večji brskalniki morda ne podpirajo.

PostCSS ponuja tudi bogat ekosistem vtičnikov JavaScript, ki jih lahko namestite, da omogočite določene funkcije, kot so minifikacija CSS, podpora za barve in podpora za linting.

Če želite uporabljati PostCSS, morate najprej inicializirati nov projekt Node.js:

npm init -y

Ta ukaz bo ustvaril datoteko package.json, ki vsebuje privzete vrednosti za vašo aplikacijo.

Nato namestite PostCSS in PostCSS CLI. Drugi paket omogoča zagon PostCSS iz ukazne vrstice:

npm i --save-dev postcss postcss-cli

The --save-dev flag namesti oboje paketi npm kot odvisnosti razvijalcev; za obdelavo kode CSS med razvojem boste uporabljali samo PostCSS in njegove vtičnike.

Če želite začeti uporabljati PostCSS prek vmesnik ukazne vrstice, pojdite v svoj package.json datoteko in ustvarite preprosto zgraditi: css ukaz za prevajanje s PostCSS:

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

Ta ukaz bo prevzel vaš goli CSS (shranjen v src/styles.css), prepiši kodo in jo nato izpiši v dest mapo. Vodenje npm build: css ukaz ustvari to mapo in jo zapolni z styles.css datoteka, ki vsebuje kodo, berljivo v brskalniku.

Ko uvažate svoj CSS v HTML, se prepričajte, da uvažate iz ciljne mape, v katero prevajate svoj CSS, in ne iz izvorne mape, iz katere prevaja PostCSS. To je v našem primeru dist mapo, ne mapo src mapo.

Če odprete svoje spletno mesto v brskalniku, boste videli, da spletno mesto še vedno dostopa do CSS. Kadar koli spremenite izvorno datoteko, bo PostCSS znova prevedel kodo in spremembe se bodo odražale na spletni strani.

Uporaba vtičnikov PostCSS

Na stotine jih je Vtičniki PostCSS za dodajanje predpon, lintinga, podpore za novo sintakso in na desetine drugih funkcij v PostCSS. Ko namestite vtičnik PostCSS, ga aktivirate znotraj postcss.config.js datoteka — datoteka JavaScript, ki jo lahko uporabite za nastavitev vseh konfiguracij za PostCSS.

Namestite cssnano Vtičnik PostCSS z naslednjim ukazom:

npm i --save-dev cssnano

Še enkrat, te odvisnosti morate samo shraniti kot odvisnosti razvijalca. Razlog je v tem, da se vse to zgodi, ko se razvijate. PostCSS ali katerega koli od njegovih vtičnikov ne potrebujete, potem ko stran potisnete v proizvodnjo.

Za uporabo na novo nameščenega vtičnika cssnano morate dodati naslednjo kodo znotraj postcss.config.js mapa:

konst cssnano = zahtevati("cssnano")
modul.exports = {
 vtičniki: [
 cssnano({
 prednastavitev: 'privzeto'
 })
 ]
}

Če se zdaj vrnete na terminal in znova zaženete ukaz za gradnjo, bo to pomanjšalo izhodni CSS (tj. naredilo kodo čim manjšo, kot je možno). Torej, ko pritisnete na spletno mesto, pripravljeno za produkcijo, bo vaš CSS čim manjši.

Uporaba sodobnih funkcij, kot je gnezdenje

Recimo, da želite uporabiti sintakso gnezdenja v svoji tabeli slogov, tako da zamenjate blok odstavka src/styles.css s tem:

telo {
 & str {
barva: oranžna;
 }
}

Ta koda je enaka različici vaše začetne kode. Toda to bo povzročilo napako, ker je sintaksa zelo nova in je večina spletnih brskalnikov ne podpira. Podporo za to sintakso lahko omogočite s PostCSS tako, da namestite postcss-preset-env vključiti.

Vtičnik združuje kup različnih vtičnikov za obdelavo CSS glede na to, na kateri stopnji je. Stopnja 0 predstavlja super eksperimentalne funkcije, ki morda sploh ne bodo prišle v CSS. Medtem ko je stopnja 4 namenjena jezikovnim funkcijam, ki so že del specifikacije CSS.

Privzeto, sedanjost-okvir uporablja funkcije stopnje 2 (ki bodo najverjetneje prišle v CSS). Lahko pa spremenite stopnjo na katero koli želite v konfiguracijski datoteki.

Če želite namestiti vtičnik, zaženite naslednji ukaz:

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

Potem v vašem postcss.config.js datoteko, uvozite vtičnik in ga registrirajte:

konst cssnano = zahtevati("cssnano")
konst postcssPresetEnv = zahtevati("postcss-preset-env")
modul.exports = {
 vtičniki: [
 cssnano({
 prednastavitev: 'privzeto'
 }),
 postcssPresetEnv({ stopnja: 1})
 ]
}

Prestati morate samo stopnjo nove kode CSS, ki jo nameravate uporabiti. V tem primeru predpostavljamo, da je funkcija gnezdenja na stopnji 1. Ko znova zaženete ukaz za gradnjo in preverite brskalnik, boste videli, da je prevedel ugnezdeno kodo v standardni CSS, ki ga brskalnik razume.

Uporaba PostCSS z ogrodji

Ročna konfiguracija PostCSS je lahko nekoliko mučna. Zato so skoraj vsa sodobna ogrodja opremljena z orodji za združevanje (npr. Vite, Snowpack in Parcel), ta orodja pa bodo imela vgrajeno podporo za PostCSS. In tudi če ne, je postopek dodajanja podpore za PostCSS neverjetno enostaven.

Vedno si zapomnite, da Vite in večina drugih povezovalnikov uporablja Sistem modulov ES6, ne CommonJS. Če se želite temu izogniti, morate uporabiti uvoz izjava namesto zahtevaj() v tvojem postcssconfig.js mapa:

uvoz cssnano od"cssnano"
// Konfiguracijska koda je tukaj

Dokler imate nameščene vtičnike, bo vse delovalo v redu.

Izvedite več o SaSS

PostCSS je le eden izmed desetine predprocesorjev CSS, ki so trenutno na voljo. Eden od njih je SaSS, kar pomeni sintaktično izjemne slogovne liste.

Če se naučite uporabljati drug glavni predprocesor, vam lahko kot razvijalec CSS pride prav.