CSS-i haldamine võib olla keeruline, eriti mis tahes mõistliku suurusega saidi puhul. Kasutage selle eeltöötlusseadmega abi.

Oletame, et õpite tundma mõnda tõeliselt lahedat CSS-i funktsiooni, näiteks pesastamist. Kuid kui lähete edasi ja proovite, mõistate, et tugi on kohutav ja kulub aastaid, enne kui saate seda lõpuks kasutada. See oli CSS-is suur probleem kuni eeltöötlejate nagu PostCSS kasutuselevõtuni.

Siit saate teada, kuidas PostCSS võimaldab teil arenduse ajal kasutada tänapäevast ja tulevast CSS-i. Saate täpselt teada, mis PostCSS on, kuidas seda kasutada ja kuidas selle funktsioone kõige paremini ära kasutada.

Projekti seadistamine

Liikuge tühja kausta, looge fail nimega index.html ja lisage faili järgmine HTML-i märgistus:

html>
<htmllang="en">
<pea>
<linkrel="laadileht"href="src/styles.css">
pea>


<keha>
<lk>Lõiklk>
<div>Divdiv>
keha>
html>

See HTML-dokument renderdab lõigu ja element. Samuti impordib see stiililehe faili nimega stiilid.css mis on sees src kausta. Looge fail kaustas src kausta ja lisage järgmised CSS-stiilireeglid:

instagram viewer 
kehalk {
värvi: oranž;
}
kehadiv {
värvi: sinine;
}
keha {
kuva: võre;
}

See CSS stiilib mõlema lehe elemendi värvi ja loob ruudustiku paigutuse. Enamik brausereid toetab sellist tavalist CSS-i süntaksit. Kuid kui näete uuemat süntaksit, peate sisse viima PostCSS-i.

Projekti Node.js loomine ja PostCSS-i installimine

Lihtsamalt öeldes võimaldab PostCSS teisendada kaasaegse CSS-i millekski, millest enamik brausereid aru saab; protsess, mida tavaliselt tuntakse transpilatsioonina. See sobib suurepäraselt, kui soovite proovida oma koodis uusi, eksperimentaalseid või mittestandardseid CSS-i atribuute, mida suuremad brauserid ei pruugi toetada.

PostCSS pakub ka rikkalikku JavaScripti pistikprogrammide ökosüsteemi, mille saate installida, et lubada teatud funktsioone, nagu CSS-i minimeerimine, värvitugi ja lintimise tugi.

PostCSS-i kasutamiseks peate esimese asjana käivitama uue Node.js-i projekti:

npm init -y

See käsk loob faili package.json, mis sisaldab teie rakenduse vaikeväärtusi.

Järgmisena installige nii PostCSS kui ka PostCSS CLI. Teine pakett võimaldab teil käivitada PostCSS käsurealt:

npm i --save-dev postcss postcss-cli

The --save-dev lipp paigaldab mõlemad npm paketid arendaja sõltuvustena; kasutate arenduse ajal CSS-koodi töötlemiseks ainult PostCSS-i ja selle pistikprogramme.

PostCSS-i kasutamise alustamiseks käsurea liides, minge oma package.json faili ja looge lihtne ehitamine: css käsk PostCSS-iga transpileerimiseks:

"skriptid": {
"build: css": "postcss src/styles.css --dir dest -w"
}

See käsk võtab teie tühja CSS-i (salvestatud src/styles.css), transpileerige kood ja seejärel väljastage see faili siht kausta. Jooksevad npm ehitus: css käsk loob selle kausta ja täidab selle kaustaga stiilid.css brauseris loetavat koodi sisaldav fail.

Kui impordite oma CSS-i HTML-i, veenduge, et impordite sihtkaustast, kuhu CSS-i kompileerite, mitte lähtekaustast, millest PostCSS kompileerib. See on meie puhul dist kaust, mitte src kausta.

Kui avate oma veebisaidi brauseris, näete, et sait pääseb endiselt juurde CSS-ile. Iga kord, kui teete lähtefailis muudatusi, kompileerib PostCSS koodi uuesti ja muudatused kajastuvad veebilehel.

PostCSS-i pluginate kasutamine

Neid on sadu PostCSS-i pistikprogrammid PostCSS-i eesliidete, lintimise, uue süntaksi toe ja kümnete muude funktsioonide lisamiseks. Pärast PostCSS-i pistikprogrammi installimist aktiveerite selle rakenduses postcss.config.js fail – JavaScripti fail, mida saate kasutada kõigi PostCSS-i konfiguratsioonide seadistamiseks.

Installige cssnano PostCSS-i pistikprogramm järgmise käsuga:

npm i --save-dev cssnano

Jällegi peate need sõltuvused salvestama ainult arendaja sõltuvustena. Põhjus on selles, et kõik need juhtuvad teie arenedes. Pärast saidi tootmisse viimist ei vaja te PostCSS-i ega ühtegi selle pistikprogrammi.

Äsja installitud cssnano pistikprogrammi kasutamiseks peate lisama järgmise koodi postcss.config.js fail:

konst cssnano = nõuda("cssnano")
moodul.exports = {
 pluginad: [
 cssnano({
 eelseadistatud: 'vaikimisi'
 })
 ]
}

Kui lähete nüüd tagasi terminali ja käivitate ehitamiskäsu uuesti, vähendab see väljund-CSS-i (st muudab koodi nii väikeseks kui inimlikult võimalik). Nii et kui liigute tootmisvalmis saidile, muudab see teie CSS-i võimalikult väikeseks.

Moodsate funktsioonide, nagu pesastamine, kasutamine

Oletame, et soovite oma stiililehel kasutada pesastussüntaksit, nii et asendate lõiguploki src/styles.css sellega:

keha {
 & lk {
värvi: oranž;
 }
}

See kood on sama mis teie stardikoodis olev versioon. Kuid see tekitab vea, kuna süntaks on väga uus ja enamik veebibrausereid seda ei toeta. Saate lubada selle süntaksi toe PostCSS-iga, installides postcss-preset-env sisse panema.

Pistikprogramm koostab CSS-i haldamiseks hunniku erinevaid pistikprogramme selle etapi põhjal. Etapp 0 esindab ülimalt eksperimentaalseid funktsioone, mis ei pruugi isegi CSS-i jõuda. Seevastu 4. etapp on mõeldud keelefunktsioonidele, mis on juba CSS-i spetsifikatsiooni osad.

Algselt, olevik-env kasutab 2. etapi funktsioone (millest saab kõige tõenäolisemalt CSS-i). Kuid saate konfiguratsioonifailis faasi muuta, mis iganes soovite.

Pistikprogrammi installimiseks käivitage järgmine käsk:

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

Siis sinu sees postcss.config.js faili, peate pistikprogrammi importima ja registreerima:

konst cssnano = nõuda("cssnano")
konst postcssPresetEnv = nõuda("postcss-preset-env")
moodul.exports = {
 pluginad: [
 cssnano({
 eelseadistatud: 'vaikimisi'
 }),
 postcssPresetEnv({ etapp: 1})
 ]
}

Peaksite läbima ainult uue CSS-koodi etapi, mida kavatsete kasutada. Sel juhul eeldame, et pesastusfunktsioon on 1. etapis. Kui käivitate ehitamiskäsu uuesti ja kontrollite brauserit, näete, et see on kompileerinud pesastatud koodi standardseks CSS-iks, mida brauser mõistab.

PostCSS-i kasutamine koos raamistikega

PostCSS-i käsitsi seadistamine võib olla pisut piin. Seetõttu on peaaegu kõigil kaasaegsetel raamistikel komplekteerimistööriistad (nt Vite, Snowpack ja Parcel) ning need tööriistad toetavad sisseehitatud PostCSS-i. Ja isegi kui nad seda ei tee, on PostCSS-i toe lisamise protsess uskumatult lihtne.

Pidage alati meeles, et Vite ja enamik teisi komplekteerijaid kasutavad ES6 moodulsüsteem, mitte CommonJS. Sellest mööda saamiseks peate kasutama importida avaldus asemel nõua () sinus postcssconfig.js fail:

importida cssnano alates"cssnano"
// Siia läheb konfiguratsioonikood

Niikaua kui teil on pistikprogrammid installitud, töötab kõik hästi.

Lisateave SaSS-i kohta

PostCSS on vaid üks kümnetest praegu saadaolevatest CSS-i eelprotsessoritest. Üks neist on SaSS, mis tähistab süntaktiliselt vingeid stiililehti.

CSS-i arendajana võib kasuks tulla teise suurema eeltöötleja kasutamise õppimine.