A CSS kezelése bonyolult lehet, különösen bármely ésszerű méretű webhely esetében. Kérjen segítő kezet ezzel az előfeldolgozóval.

Tegyük fel, hogy megismer egy igazán klassz CSS-funkciót, például a beágyazást. De amikor továbblépsz és kipróbálod, rájössz, hogy a támogatás szörnyű, és évekbe telhet, mire végre használhatod. Ez óriási probléma volt a CSS-ben egészen az olyan előfeldolgozók bevezetéséig, mint a PostCSS.

Ismerje meg, hogyan teszi lehetővé a PostCSS a modern és jövőbeli CSS használatát a fejlesztés során. Megtudhatja, hogy pontosan mi az a PostCSS, hogyan használhatja, és hogyan lehet a legjobban kihasználni funkcióit.

A projekt beállítása

Lépjen egy üres mappába, hozzon létre egy index.html nevű fájlt, és adja hozzá a következő HTML-jelölést a fájlhoz:

html>
<htmllang="en">

<fej>
<linkrel="stíluslap"href="src/styles.css">
fej>

<test>
<p>Bekezdésp>
<div>Divdiv>
test>

html>

Ez a HTML dokumentum egy bekezdést és elem. nevű stíluslapfájlt is importál stílusok.css hogy benne van a src mappát. Hozza létre a fájlt a src mappát, és tartalmazza a következő CSS-stílusszabályokat:

instagram viewer
testp {
szín: narancs;
}

testdiv {
szín: kék;
}

test {
kijelző: rács;
}

Ez a CSS stílusozza az oldal mindkét elemének színét, és létrehoz egy rács elrendezést. A legtöbb böngésző támogatja az ehhez hasonló normál CSS-szintaxist. De ha már látja az újabb szintaxist, be kell vinnie a PostCSS-t.

Node.js projekt létrehozása és a PostCSS telepítése

Egyszerűen fogalmazva, a PostCSS lehetővé teszi, hogy a modern CSS-t olyanná alakítsa, amit a legtöbb böngésző képes megérteni; transzpilációként ismert folyamat. Ez tökéletes, ha olyan új, kísérleti vagy nem szabványos CSS-tulajdonságokat szeretne kipróbálni a kódjában, amelyeket a nagyobb böngészők esetleg nem támogatnak.

A PostCSS emellett JavaScript-bővítmények gazdag ökoszisztémáját is kínálja, amelyeket telepíthet bizonyos funkciók, például a CSS-kicsinyítés, a színtámogatás és a linting támogatás engedélyezéséhez.

A PostCSS használatához először inicializálnia kell egy új Node.js projektet:

npm init -y

Ez a parancs létrehoz egy package.json fájlt, amely tartalmazza az alkalmazás alapértelmezett értékeit.

Ezután telepítse a PostCSS-t és a PostCSS parancssori felületet is. A második csomag lehetővé teszi a PostCSS futtatását a parancssorból:

npm i --save-dev postcss postcss-cli

A --save-dev flag mindkettőt telepíti npm csomagok mint fejlesztői függőségek; csak a PostCSS-t és annak beépülő moduljait fogja használni a CSS-kód feldolgozásához a fejlesztés során.

A PostCSS használatának megkezdéséhez a parancssori felület, menj be a tiédbe package.json fájlt, és hozd létre az egyszerűt build: css parancs a PostCSS-sel történő transzpilációhoz:

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

Ez a parancs átveszi a csupasz CSS-t (tárolva src/styles.css), fordítsa át a kódot, majd adja ki a dest mappát. Futás a npm build: css parancs létrehozza ezt a mappát, és feltölti a stílusok.css böngésző által olvasható kódot tartalmazó fájl.

Amikor importálja a CSS-t a HTML-be, győződjön meg arról, hogy abból a célmappából importál, ahol a CSS-t fordítja, és nem abból a forrásmappából, amelyből a PostCSS fordít. Ez esetünkben a ker mappa, nem a src mappát.

Ha megnyitja webhelyét egy böngészőben, látni fogja, hogy a webhely továbbra is hozzáfér a CSS-hez. Bármikor módosítja a forrásfájlt, a PostCSS újrafordítja a kódot, és a módosítások megjelennek a weboldalon.

PostCSS beépülő modulok használata

Több száz van PostCSS bővítmények a PostCSS előtagjainak hozzáadásához, fűzéshez, új szintaxis-támogatáshoz és több tucat egyéb szolgáltatáshoz. A PostCSS beépülő modul telepítése után aktiválja azt a postcss.config.js fájl — egy JavaScript-fájl, amellyel beállíthatja a PostCSS összes konfigurációját.

Telepítse a cssnano PostCSS beépülő modul a következő paranccsal:

npm i --save-dev cssnano

Ismét csak ezeket a függőségeket kell mentenie fejlesztői függőségekként. Ennek az az oka, hogy mindez a fejlődés során történik. Nincs szüksége a PostCSS-re vagy annak bármely beépülő moduljára, miután a webhelyet élesre vitte.

Az újonnan telepített cssnano beépülő modul használatához hozzá kell adnia a következő kódot a postcss.config.js fájl:

const cssnano = igényelnek("cssnano")

modul.exports = {
bővítmények: [
cssnano({
előre beállított: 'alapértelmezett'
})
]
}

Ha most visszatér a terminálhoz, és újra futtatja a build parancsot, ez lecsökkenti a kimeneti CSS-t (vagyis a kódot olyan kicsinyíti, amennyire emberileg lehetséges). Tehát ha egy termelésre kész webhelyre lép, akkor a CSS a lehető legkisebb lesz.

Modern funkciók, például a fészkelés használata

Tegyük fel, hogy a beágyazott szintaxist szeretné használni a stíluslapon, ezért cserélje ki a bekezdésblokkot src/styles.css ezzel:

test {
& p {
szín: narancs;
}
}

Ez a kód megegyezik a kezdőkódban szereplő verzióval. Ez azonban hibát fog okozni, mert a szintaxis nagyon új, és a legtöbb webböngésző nem támogatja. Engedélyezheti ennek a szintaxisnak a támogatását a PostCSS-ben, ha telepíti a postcss-preset-env csatlakoztat.

A beépülő modul egy csomó különböző beépülő modult állít össze a CSS kezeléséhez, attól függően, hogy melyik szakaszban van. A 0. szakasz a szuper kísérleti funkciókat képviseli, amelyek talán még a CSS-be sem kerülnek be. Míg a 4. szakasz azokra a nyelvi funkciókra vonatkozik, amelyek már a CSS specifikáció részét képezik.

Alapértelmezés szerint, jelen-env szakasz 2 funkcióit használja (amelyek nagy valószínűséggel bekerülnek a CSS-be). De a konfigurációs fájlban tetszőlegesre módosíthatja a szakaszt.

A bővítmény telepítéséhez futtassa a következő parancsot:

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

Aztán a tiédben postcss.config.js fájlt, importálnia kell a bővítményt, és regisztrálnia kell:

const cssnano = igényelnek("cssnano")
const postcssPresetEnv = igényelnek("postcss-preset-env")

modul.exports = {
bővítmények: [
cssnano({
előre beállított: 'alapértelmezett'
}),
postcssPresetEnv({ színpad: 1})
]
}

Csak a használni kívánt új CSS-kód szakaszát kell átmennie. Ebben az esetben feltételezzük, hogy a beágyazási funkció az 1. szakaszban van. Amikor újrafuttatja a build parancsot, és ellenőrzi a böngészőt, látni fogja, hogy a beágyazott kódot szabványos CSS-be fordította, amelyet a böngésző megért.

PostCSS használata keretrendszerekkel

A PostCSS kézi konfigurálása egy kicsit fájdalmas lehet. Ez az oka annak, hogy szinte minden modern keretrendszerhez tartozik kötegelő eszközök (pl. Vite, Snowpack és Parcel), és ezek az eszközök beépítve támogatják a PostCSS-t. És még ha nem is, a PostCSS-támogatás hozzáadásának folyamata hihetetlenül egyszerű.

Mindig ne feledje, hogy a Vite és a legtöbb más kötegelő használja ES6 modulrendszer, nem CommonJS. Ennek megkerüléséhez a import kijelentés helyett igényel() a tiédben postcssconfig.js fájl:

import cssnano tól től"cssnano"

// Ide kerül a konfigurációs kód

Amíg a bővítmények telepítve vannak, minden rendben fog működni.

További információ az SaSS-ről

A PostCSS csak egy a jelenleg elérhető CSS-előfeldolgozók tucatjai közül. Az egyik az SaSS, amely a szintaktikailag fantasztikus stíluslapokat jelenti.

CSS-fejlesztőként jól jöhet egy másik fő előfeldolgozó használatának megtanulása.