10 Awesome PostCSS vtičniki za izdelavo CSS čarovnika

PostCSS je neverjetno vsestransko orodje, ki omogoča preoblikujete sloge CSS s pluginsom JavaScript. Njegova prilagodljivost je v načinu gradnje.

Osrednji del PostCSS je modul Node.js, ki ga lahko namestite z npm in ima ekosistem z več kot 200 vtičniki, ki jih lahko uporabite v svojem projektu..

PostCSS ni niti predprocesor, niti postprocesor, saj lahko različni vtičniki PostCSS spadajo v eno od teh kategorij ali oboje; v celoti je odvisno od vas, kaj naredite. Z PostCSS, vi ni treba učiti drugačne sintakse kot v primeru Sass ali LESS; lahko ga takoj začnete uporabljati.

PostCSS prevzame vašo obstoječo datoteko CSS in jo spremeni v podatke, berljive za JavaScript, nato pa vtičniki JavaScript izvedejo spremembe in PostCSS vrne spremenjeno različico izvirne datoteke. Sliši se kul, kajne?

V tem prispevku si bomo ogledali 10 PostCSS vtičnikov vam omogoči vpogled v nekatere velike stvari, ki jih lahko dosežete s tem odličnim orodjem.

1. Samodejna pritrditev

Samodejni predpone je verjetno najbolj znana vtičnica PostCss, saj jo uporabljajo pomembna tehnološka podjetja, kot so Google, Twitter in Shopify. To doda predpone prodajalca pravilnikom CSS, kjer je to potrebno.

Autoprefixer uporablja podatke iz Can I Use. Tako se ne zastara in vedno lahko uporablja najnovejša pravila. Lahko si ogledate, kako deluje na interaktivnem demo spletnem mestu.

2. CSSnext

CSSnext je CSS transpiler, ki omogoča uporabo sintakse CSS na trenutnih straneh. W3C ima veliko novih pravil CSS, ki jih brskalniki trenutno ne izvajajo, vendar lahko razvijalcem omogočijo, da hitreje in lažje zapišejo naprednejši CSS. CSSnext je bil oblikovan za premostitev te vrzeli.

To je vredno, da si ogledate njene značilnosti, da vidite, kaj lahko dosežete z njim, na primer lahko uporabite poizvedbe po meri, izbirnike po meri, modifikatorje barv, filtre SVG in nove psevdoklase v vaših modelih.

3. PreCSS

PreCSS je eden od vtičnikov PstCSS, ki delujejo kot predprocesor CSS. To omogoča izkoristite prednosti Sassovega označevanja v datotekah s preglednicami.

Z uvedbo PreCSS v delovni tok lahko uporabite spremenljivke, če potem izjave, za zank, mešanice, @extend in @import pravila, gnezdenje in številne druge priročne funkcije v kodi CSS. Dokumentacija PreCSS Github vam nudi podrobna navodila o tem, kako jo lahko kar najbolje izkoristite.

4. StyleLint

StyleLint je sodoben CSS linter preverja in preverja vašo kodo CSS. Zaradi tega se je mogoče izogniti napakam in vas prisiliti, da sledite doslednim konvencijam kodiranja.

StyleLint razume najnovejšo sintakso CSS, zato jo lahko uporabite skupaj s prej omenjenim vtičnikom PreCSS. Omogoča tudi izdelavo lastne konfiguracije in celo preverjanje veljavnosti nastavitev.

5. PostCSS sredstva

Vtičnik PostCSS Assets je priročen upravljalnik sredstev za datoteke CSS. To je lahko odlična izbira, če imate težave s potmi URL-jev, ker sredstva PostCSS izolirajo datoteke slogovnih slogov od okoljskih sprememb.

Določiti morate poti nalaganja, relativne poti in osnovno pot, plugin pa bo samodejno poiskal sredstva, ki jih potrebujete. Na primer lahko zapišete naslednjo kodo, če potrebujete ustrezen URL foobar.jpg slika:

 telo ozadje: razreši ('foobar.jpg'); 

Tudi sredstva za PostCSS skrbi za predpomnilnik sredstev, kot lahko nastavite cachebuster spremenljivka v true, če želite, da se poti URL-jev samodejno spremenijo, če se sredstvo spremeni. Ta pametni vtičnik izračuna tudi dimenzije (širino in višino) slikovnih datotek ali jih celo spremeni s prednastavljenim razmerjem.

6. CSSNano

Če potrebujete optimizirane in pomanjšane datoteke CSS za mesto izdelave, je vredno preveriti CSSNano. To je modularni vtičnik, ki ga sestavljajo številni manjši vmesniki PostCSS z eno odgovornostjo. Ne izvaja samo osnovnih tehnik pomanjševanja, kot je odstranjevanje presledkov, ampak ima tudi napredne možnosti, ki omogočajo osredotočene optimizacije.

Med številnimi drugimi funkcijami je CSSNano zmožen preoblikovati vrednosti z-indeksa, zmanjšati identifikatorje po meri, spremeniti dolžino, čas in barvne vrednosti ter odstraniti zastarele predpone prodajalca.

7. Čarovnik za pisave

Če ste ljubitelj sofisticirane tipografije, vam bo zagotovo všeč Čarovnik za pisave PostCSS vtičnik. Čarobnost čarovnika pisave se opira na svojo sposobnost samodejno generira vse potrebno @ font-face pravila.

Kako deluje je precej enostavno, morate samo dodati družina pisav: "My Fav Font"; Pravilo CSS za element HTML in čarovnik za pisave opravi preostanek dela. Lahko doda Google Fonts, lokalno kopijo pisave, Bootstrap tipografijo in lahko tudi asinhrono naloži pisave. Tu je interaktivno predstavitveno spletno mesto.

8. Napišite SVG

Ste se kdaj spraševali, kako kul je napisati SVG v vaše CSS datoteke? S pomočjo vtičnika Write SVG PostCSS lahko enostavno dosežete ta cilj.

Ta priročen vtičnik, na primer, omogoča shranite ozadja in ikone SVG v datoteko CSS, in pozneje dodajte jih v ustrezen element HTML na naslednji način: \ t

 @svg square @rect fill: var (- barva, črna); širina: 100%; višina: 100%;  .primer ozadje: bela svg (kvadratna param (- barva # 00b1ff)) pokrov; 

9. Izgubljena mreža

Izgubljena mreža je odličen PostCSS vtičnik, ki vam omogoča impresivno Omrežni sistem CSS to ne le deluje z navadnim CSS ampak tudi z jeziki predprocesorja (Sass, LESS, Stylus). Uporablja calc () Funkcija CSS za ustvarjanje lepih mrež, ki jih lahko preprosto uporabite, ne da bi porabili preveč časa s prilagajanjem.

Izgubljena mreža ima precej preprostih pravil, na primer definiranje stolpca s 25-odstotno širino ne zahteva več kot ta mali delček kode:

 div izgubljen-stolpec: 1/4; 

10. PostCSS Sprite

The PostCSS Sprite plugin olajša ustvarjanje slikovnih duhov, zbirke slik, ki so shranjene v eno datoteko. Ko nastavite nekaj možnosti, plugin posname slike iz datoteke slogov, jih združi v sprit, nato pa posodobi reference slik, kjer koli je potrebno.

Uporabite lahko različne filtre in skupinske skupine, da določite, katere slike želite vstaviti v duh, in lahko nastavite tudi dimenzije izhodne slike..