10 Awesome PostCSS papildiniai, kad taptumėte CSS vedikliu

„PostCSS“ yra neįtikėtinai universalus įrankis, leidžiantis transformuoti CSS stilius su „JavaScript“ papildiniais. Jo lankstumas priklauso nuo to, kaip jis pastatytas.

Pagrindinė „PostCSS“ dalis yra „Node.js“ modulis, kurį galite įdiegti naudodami „npm“, ir jis turi daugiau nei 200 papildinių, kuriuos galite pasirinkti naudoti projekte, ekosistemą..

PostCSS nėra nei išankstinis procesorius, nei antrinis procesorius, nes skirtingi PostCSS įskiepiai gali patekti į vieną iš šių kategorijų arba abu; tai visiškai priklauso nuo jūsų, ką jūs padarote. Su PostCSS, jūs nereikia išmokti kitos sintaksės kaip Sass ar LESS atveju; galite nedelsiant pradėti jį naudoti.

„PostCSS“ priima esamą CSS failą ir paverčia jį į „JavaScript“ nuskaitomus duomenis, tada „JavaScript“ papildiniai atlieka pakeitimus, o „PostCSS“ grąžina pakeistą originalaus failo versiją. Skamba vėsioje, ar ne?

Šiame pranešime mes peržiūrėsime 10 „PostCSS“ papildinių suteiks jums supratimą apie kai kuriuos puikius dalykus, kuriuos galite pasiekti su šiuo nuostabiu įrankiu.

1. Autoprefixer

Autoprefixer tikriausiai yra labiausiai žinomas „PostCss“ įskiepis, nes jį naudoja geros technologijos įmonės, pvz., „Google“, „Twitter“ ir „Shopify“. Tai prideda tiekėjo prefiksus CSS taisyklėms, kai tai būtina.

Autoprefixer naudoja duomenis iš „Can I Use“. Tokiu būdu jis nepasiekia datų ir visada gali taikyti naujausias taisykles. Galite patikrinti, kaip jis veikia interaktyvioje demonstracinėje svetainėje.

2. CSSnext

CSSnext tai yra CSS leidžia naudoti būsimą CSS sintaksę dabartinėse svetainėse. „W3C“ turi daug naujų CSS taisyklių, kurios šiuo metu nėra įdiegtos naršyklėse, tačiau gali padėti kūrėjams greičiau ir lengviau rašyti sudėtingesnius CSS. Buvo atlikta CSS, kad būtų pašalintas šis atotrūkis.

Verta pažvelgti į jos savybes, kad pamatytumėte, ką galite su juo atlikti, pavyzdžiui, galite naudoti priskirtas medijos užklausas, pasirinktinius pasirinktuvus, spalvų modifikatorius, SVG filtrus ir naujas pseudoklases jūsų dizainuose.

3. PreCSS

PreCSS yra vienas iš PstCSS priedų, kurie veikia kaip CSS išankstinis apdorojimas. Tai leidžia naudokite „Sass“ tipo žymėjimą naudodamiesi „sytlesheet“ failais.

Įvedę PreCSS į savo darbo eigą, galite naudoti kintamuosius, jei-dar pareiškimus, dėl kilpos, mišiniai, @extend ir @import CSS kodo taisyklės, lizdavimas ir daug kitų patogių funkcijų. „PreCSS“ „Github“ dokumentai suteikia jums išsamias instrukcijas, kaip tai padaryti.

4. „StyleLint“

„StyleLint“ tai moderni CSS linter koreguoja ir patvirtina jūsų CSS kodą. Tai leidžia lengvai išvengti klaidų ir verčia laikytis nuoseklių kodavimo konvencijų.

StyleLint supranta naujausią CSS sintaksę, todėl ją galima naudoti kartu su anksčiau minėtu PreCSS papildiniu. Jis taip pat leidžia jums sukurti savo konfigūraciją ir netgi patikrinti, ar jūsų nustatymai galioja.

5. PostCSS turtas

„PostCSS“ turto papildinys yra patogus CSS failų turto valdytojas. Tai gali būti puikus pasirinkimas, jei linkę turėti problemų su URL keliais, nes „PostCSS“ turtas išskiria jūsų stiliaus lapų failus iš aplinkos pokyčių.

Turite nustatyti apkrovos kelius, santykinius kelius ir bazinį kelią, o įskiepiai automatiškai ieškos jums reikalingo turto. Pvz., Galite parašyti šį kodą, jei jums reikia tinkamo URL adreso foobar.jpg vaizdas:

 kūnas fonas: išspręsti ('foobar.jpg'); 

Be to, PostCSS turtas rūpinasi turto talpykla, kaip galite nustatyti cachebuster kintamasis į tiesa, jei norite, kad URL takai būtų automatiškai keičiami, jei turtas būtų pakeistas. Šis išmanusis įskiepis taip pat apskaičiuoja vaizdo failų matmenis (plotį ir aukštį), arba netgi pakeičia jų dydį naudodamas iš anksto nustatytą santykį.

6. CSSNano

Jei gamybos vietai reikia optimizuotų ir redaguotų CSS failų, verta tai patikrinti CSSNano. Tai modulinis įskiepis, susidedantis iš daugelio mažesnių, vienos atsakomybės PostCSS papildinių. Jis ne tik atlieka pagrindines minifikavimo technologijas, pvz., Pašalina vietas, bet ir turi papildomų parinkčių, kurios leidžia atlikti tikslines optimizacijas.

Tarp daugelio kitų funkcijų, „CSSNano“ gali iš naujo perskaičiuoti z-indekso reikšmes, sumažinti individualius identifikatorius, konvertuoti ilgio, laiko ir spalvų reikšmes ir pašalinti pasenusius tiekėjo prefiksus.

7. Šrifto magas

Jei esate sudėtingos tipografijos gerbėjas, jums tikrai patiks Šriftų magas „PostCSS“ papildinys. „Font Magician“ magija remiasi jos gebėjimu automatiškai generuoti visus būtinus @ šrifto veidas taisykles.

Kaip tai veikia, yra gana paprasta, jums reikia tik pridėti šrifto šeima: „Mano fav šriftas“; CSS taisyklė HTML elementui, o „Font Magician“ atlieka likusią darbo dalį. Jis gali pridėti „Google“ šriftus, vietinę šrifto kopiją, „Bootstrap“ tipografiją ir taip pat gali įkelti šriftus asinchroniškai. Čia yra jo interaktyvi demonstracinė svetainė.

8. Parašykite SVG

Ar kada nors susimąstėte apie tai, kaip gerai būtų parašyti SVG į savo CSS failus? Naudodami „Rašyti SVG PostCSS“ papildinį galite lengvai pasiekti šį tikslą.

Pavyzdžiui, šis patogus įskiepis leidžia išsaugokite savo SVG fonus ir piktogramas CSS faile, ir vėliau pridėkite juos prie atitinkamo HTML elemento taip:

 @svg square @rect fill: var (- spalva, juoda); plotis: 100%; aukštis: 100%;  .pavyzdys fonas: baltas svg (kvadratinis param (- spalva # 00b1ff)) dangtelis; 

9. Pamestas tinklelis

Pamestas tinklelis yra puikus PostCSS įskiepis, kuris suteikia jums įspūdingą CSS tinklo sistema tai ne tik dirba su paprastu CSS bet ir su išankstinio apdorojimo kalbos (Sass, LESS, Stylus). Jis naudoja Calc () CSS funkcija sukuria gražią tinklelį, kurį galite lengvai naudoti be pernelyg daug laiko su pritaikymu.

„Lost Grid“ taisyklės yra gana paprastos, pvz., Kolonos su 25% pločiu apibrėžimas užima ne daugiau nei šis mažas kodo fragmentas:

 div lost-column: 1/4; 

10. PostCSS Sprites

The „PostCSS Sprite“ įskiepiai leidžia lengvai generuoti vaizdo sprites, t. y. vaizdų rinkiniai, patalpinti į vieną failą. Nustatę kelias parinktis, įskiepiai atvaizdus atsiunčia nuo stiliaus failo failo, sujungia juos į sprite, tada atnaujina vaizdų nuorodas, kur tik reikia.

Galite nustatyti skirtingus filtrus ir grupuotojus, kad nustatytumėte, kuriuos vaizdus norite įdėti į sprite, taip pat galite nustatyti išvesties vaizdo matmenis.