Kaip naudoti „PostCSS“ interneto dizainui išvalyti

Tarkime, kad sužinojote apie tikrai puikią CSS funkciją, pvz., įdėjimą. Bet kai einate į priekį ir išbandote, suprantate, kad parama yra siaubinga, ir praeis keleri metai, kol pagaliau galėsite ja pasinaudoti. Tai buvo didžiulė CSS problema, kol nebuvo pristatyti tokie išankstiniai procesoriai kaip PostCSS.

Sužinokite, kaip „PostCSS“ leidžia naudoti šiuolaikišką ir būsimą CSS kūrimo metu. Sužinosite, kas yra „PostCSS“, kaip galite jį naudoti ir kaip geriausia pasinaudoti jo funkcijomis.

Projekto nustatymas

Eikite į tuščią aplanką, sukurkite failą pavadinimu index.html ir į failą pridėkite šį HTML žymėjimą:

html>
<htmllang="en">
<galva>
<nuorodarel="stiliaus lapas"href="src/styles.css">
galva>
<kūnas>
<p>Pastraipap>
<div>Divdiv>
kūnas>
html>

Šis HTML dokumentas pateikia pastraipą ir elementas. Ji taip pat importuoja stiliaus lapo failą pavadinimu stiliai.css kad yra viduje src aplanką. Sukurkite failą src aplanką ir įtraukite šias CSS stiliaus taisykles:

kūnasp {
spalva: oranžinė;
}
kūnasdiv {
spalva: mėlyna;
}
kūnas {
ekranas: tinklelis;
}

Šis CSS formuoja abiejų puslapio elementų spalvas ir sukuria tinklelio išdėstymą. Dauguma naršyklių palaiko įprastą tokią CSS sintaksę. Tačiau kai matysite naujesnę sintaksę, turėsite įtraukti PostCSS.

Node.js projekto kūrimas ir PostCSS įdiegimas

Paprastai tariant, PostCSS leidžia konvertuoti šiuolaikinį CSS į kažką, ką supranta dauguma naršyklių; procesas, paprastai žinomas kaip transpiliacija. Tai puikiai tinka, jei norite išbandyti naujas, eksperimentines ar nestandartines CSS ypatybes savo kode, kurių pagrindinės naršyklės gali nepalaikyti.

„PostCSS“ taip pat siūlo gausią „JavaScript“ įskiepių ekosistemą, kurią galite įdiegti, kad įgalintumėte tam tikras funkcijas, pvz., CSS sumažinimą, spalvų palaikymą ir susiuvimo palaikymą.

Norėdami naudoti PostCSS, pirmas dalykas, kurį turite padaryti, yra inicijuoti naują Node.js projektą:

npm init -y

Ši komanda sugeneruos failą package.json, kuriame bus numatytosios programos reikšmės.

Tada įdiekite ir PostCSS, ir PostCSS CLI. Antrasis paketas leidžia paleisti PostCSS iš komandinės eilutės:

npm i --save-dev postcss postcss-cli

The --save-dev vėliavėlė įdiegia abu npm paketai kaip kūrėjo priklausomybės; kūrimo metu naudosite tik PostCSS ir jo papildinius, kad apdorotumėte CSS kodą.

Norėdami pradėti naudoti PostCSS naudodami komandinės eilutės sąsaja, eik į savo package.json failą ir sukurkite paprastą konstrukcija: css komanda, skirta perkelti naudojant PostCSS:

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

Ši komanda paims jūsų atvirą CSS (saugomą src/styles.css), perkelkite kodą ir išveskite jį į pask aplanką. Paleidžiant npm statyba: css komanda sukuria šį aplanką ir užpildo jį su stiliai.css failą, kuriame yra naršyklės skaitomas kodas.

Kai importuojate CSS į HTML, įsitikinkite, kad importuojate iš paskirties aplanko, kuriame kompiliuojate CSS, o ne iš šaltinio aplanko, iš kurio kompiliuoja PostCSS. Tai, mūsų atveju, yra raj aplanką, o ne src aplanką.

Jei atidarysite svetainę naršyklėje, pamatysite, kad svetainė vis tiek pasiekia CSS. Kaskart, kai pakeisite šaltinio failą, PostCSS iš naujo sukompiliuos kodą ir pakeitimai atsispindės tinklalapyje.

Naudojant PostCSS papildinius

Yra šimtai PostCSS įskiepiai Norėdami pridėti priešdėlių, įbrėžimų, naujos sintaksės palaikymo ir daugybės kitų „PostCSS“ funkcijų. Įdiegę PostCSS papildinį suaktyvinkite jį viduje postcss.config.js failas – „JavaScript“ failas, kurį galite naudoti visoms „PostCSS“ konfigūracijoms nustatyti.

Įdiekite cssnano PostCSS papildinys su šia komanda:

npm i --save-dev cssnano

Vėlgi, jums tereikia išsaugoti šias priklausomybes kaip kūrėjo priklausomybes. Priežastis ta, kad visa tai vyksta jums tobulėjant. Perkėlus svetainę į gamybą, jums nereikia „PostCSS“ ar jokių jo papildinių.

Norėdami naudoti naujai įdiegtą cssnano papildinį, turite pridėti šį kodą postcss.config.js failas:

konst cssnano = reikalauti("cssnano")
modulis.exports = {
 papildiniai: [
 cssnano ({
 iš anksto nustatytas: 'numatytieji'
 })
 ]
}

Dabar, jei grįšite į terminalą ir iš naujo paleisite kūrimo komandą, tai sumažins išvesties CSS (t. y. padarysite kodą kuo mažesnį). Taigi, kai persikeliate į gamybai paruoštą svetainę, jūsų CSS bus kuo mažesnis.

Šiuolaikinių funkcijų, pvz., Nesting, naudojimas

Tarkime, kad stilių lape norite naudoti įdėjimo sintaksę, todėl pakeisite pastraipos bloką src/styles.css su šiuo:

kūnas {
 & p {
spalva: oranžinė;
 }
}

Šis kodas yra toks pat kaip ir jūsų startinio kodo versija. Tačiau tai sukels klaidą, nes sintaksė yra labai nauja ir dauguma interneto naršyklių jos nepalaiko. Galite įjungti šios sintaksės palaikymą naudodami PostCSS, įdiegę postcss-preset-env Prijunkite.

Įskiepis sudaro daugybę skirtingų CSS tvarkymo papildinių, atsižvelgdamas į tai, koks jis yra. 0 pakopa yra super eksperimentinės funkcijos, kurios gali net nepatekti į CSS. Tuo tarpu 4 etapas skirtas kalbos funkcijoms, kurios jau yra CSS specifikacijos dalis.

Pagal numatytuosius nustatymus dabartis-aplink naudoja 2 etapo funkcijas (kurios greičiausiai pateks į CSS). Bet konfigūracijos faile galite pakeisti etapą į bet kokį norimą.

Norėdami įdiegti papildinį, paleiskite šią komandą:

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

Tada tavo postcss.config.js failą, turite importuoti papildinį ir jį užregistruoti:

konst cssnano = reikalauti("cssnano")
konst postcssPresetEnv = reikalauti("postcss-preset-env")
modulis.exports = {
 papildiniai: [
 cssnano ({
 iš anksto nustatytas: 'numatytieji'
 }),
 postcssPresetEnv({ etapas: 1})
 ]
}

Turėtumėte išlaikyti tik tą naujojo CSS kodo, kurį ketinate naudoti, etapą. Šiuo atveju darome prielaidą, kad įdėjimo funkcija yra 1 etape. Iš naujo paleidę kūrimo komandą ir patikrinę naršyklę, pamatysite, kad ji sukompiliavo įdėtą kodą į standartinį CSS, kurį naršyklė gali suprasti.

„PostCSS“ naudojimas su „Frameworks“.

„PostCSS“ konfigūravimas rankiniu būdu gali būti šiek tiek skausmingas. Štai kodėl beveik visose šiuolaikinėse sistemose yra susiejimo įrankiai (pvz., „Vite“, „Snowpack“ ir „Parcel“), o šie įrankiai turės integruotą „PostCSS“ palaikymą. Ir net jei jie to nedaro, PostCSS palaikymo pridėjimo procesas yra neįtikėtinai lengvas.

Visada atminkite, kad Vite ir dauguma kitų rinkėjų naudojasi ES6 modulių sistema, o ne CommonJS. Norėdami tai apeiti, turite naudoti importuoti pareiškimas vietoje reikalauti () tavo postcssconfig.js failas:

importuoti cssnano iš"cssnano"
// Konfigūracijos kodas pateikiamas čia

Jei įdiegsite papildinius, viskas veiks gerai.

Sužinokite daugiau apie SaSS

PostCSS yra tik vienas iš dešimčių šiuo metu galimų CSS išankstinių procesorių. Vienas iš jų yra SaSS, kuris reiškia sintaksiškai nuostabius stiliaus lapus.

Mokymasis naudoti kitą pagrindinį pirminį procesorių gali būti naudingas CSS kūrėjui.