10 Strašan PostCSS Dodaci za vas CSS Čarobnjak
PostCSS je nevjerojatno svestran alat koji omogućuje pretvoriti CSS stilove pomoću JavaScript dodataka. Njegova fleksibilnost leži u načinu na koji je izgrađen.
Osnovni dio PostCSS-a je modul Node.js koji možete instalirati s npm, a ima i ekosustav od više od 200 dodataka koje možete odabrati u svom projektu..
PostCSS nije ni pretprocesor ni postprocesor, budući da različiti PostCSS dodaci mogu pasti u bilo koju od ovih kategorija, ili oboje; u potpunosti ovisi o vama što ćete učiniti. S PostCSS-om, vi ne morate učiti drugu sintaksu kao u slučaju Sass ili LESS; možete ga odmah početi koristiti.
PostCSS uzima vašu postojeću CSS datoteku i pretvara je u podatke koji su čitljivi za JavaScript, zatim JavaScript dodatci izvode izmjene, a PostCSS vraća izmijenjenu verziju izvorne datoteke. Zvuči cool, zar ne?
U ovom postu ćemo pogledati 10 PostCSS dodataka dati vam uvid u neke od velikih stvari koje možete postići s ovim izvrsnim alatom.
1. Autoprefixer
Autoprefixer je vjerojatno najpoznatiji PostCss dodatak, jer ga koriste značajne tehnološke tvrtke kao što su Google, Twitter i Shopify. To dodaje prefiksima dobavljača u CSS pravila gdje je to potrebno.
Autoprefixer koristi podatke iz Can I Use. Na taj se način ne može zastarjeti i uvijek može primijeniti najnovija pravila. Možete provjeriti kako funkcionira na interaktivnoj demo web-lokaciji.
2. CSSnext
CSSnext je CSS transpiler koji omogućuje korištenje buduće CSS sintakse na trenutnim web-lokacijama. W3C ima mnogo novih CSS pravila koja trenutno nisu implementirana od strane preglednika, ali mogu omogućiti programerima brže i lakše pisanje sofisticiranijih CSS-ova. CSSnext je napravljen kako bi se premostio ovaj jaz.
Vrijedi pogledati njegove značajke da biste vidjeli što možete postići s njim, na primjer možete koristite upite prilagođenih medija, prilagođene selektore, modifikatore boja, SVG filtre i nove pseudoklase u vašim nacrtima.
3. PreCSS
PreCSS je jedan od PstCSS dodataka koji rade kao CSS pretprocesor. To omogućuje iskoristite Sassovu oznaku u svojim datotekama.
Uvođenjem PreCSS-a u vaš tijek rada možete koristiti varijable, ako-drugo izjava, za petlje, mješavine, @extend i @uvoz pravila, gniježđenje i mnoge druge praktične značajke u CSS kodu. PreCSS-ova Github dokumentacija daje detaljne upute o tome kako je najbolje iskoristiti.
4. StyleLint
StyleLint to je moderan CSS linter provjerava i provjerava vaš CSS kod. To olakšava izbjegavanje pogrešaka i potiče vas da slijedite dosljedne konvencije kodiranja.
StyleLint razumije najnoviju CSS sintaksu, tako da se može koristiti zajedno s prethodno spomenutim PreCSS dodatkom. Također vam omogućuje da napravite vlastitu konfiguraciju, pa čak i provjerite jesu li vaše postavke valjane.
5. PostCSS imovina
Dodatak PostCSS Assets je zgodan upravitelj imovine za CSS datoteke. To može biti odličan izbor ako imate poteškoća s URL-ovima, budući da PostCSS sredstva izoliraju datoteke stila od promjena u okolišu.
Trebate definirati putove učitavanja, relativne putove i osnovnu stazu, a dodatak će automatski tražiti potrebna sredstva. Na primjer, možete upisati sljedeći kôd ako vam je potreban odgovarajući URL foobar.jpg slika:
tijelo pozadina: rije i ('foobar.jpg'); PostCSS Imovina također brine o predmemoriji imovine, kao što možete postaviti CACHEBUSTER varijabla u true ako želite da se URL putovi automatski mijenjaju u slučaju promjene objekta. Ovaj pametni dodatak također izračunava dimenzije (širinu i visinu) slikovnih datoteka ili ih čak mijenja veličinu pomoću unaprijed postavljenog omjera.
6. CSSNano
Ako trebate optimizirane i minificirane CSS datoteke za proizvodnu web-lokaciju, vrijedi provjeriti CSSNano. To je modularni dodatak koji se sastoji od mnogo manjih, jednokomponentnih PostCSS dodataka. Ne izvodi samo osnovne tehnike miniranja kao što je uklanjanje razmaka, već i napredne opcije koje omogućuju fokusirane optimizacije.
Između mnogih drugih značajki, CSSNano je sposoban poništiti vrijednosti z-indeksa, smanjiti prilagođene identifikatore, pretvoriti duljinu, vrijeme i vrijednosti boja te ukloniti zastarjele prefikse dobavljača.
7. Čarobnjak za fontove
Ako ste ljubitelj sofisticirane tipografije, sigurno će vam se svidjeti Čarobnjak za fontove PostCSS dodatak. Čarolija fonta mađioničara oslanja se na svoju sposobnost automatski generira sve potrebno 'Font-lica pravila.
Kako to funkcionira prilično je jednostavno, samo trebate dodati font-family: "Moj Fav Font"; CSS pravilo u HTML elementu, a čarobnjak za fontove obavlja ostatak posla. Može dodati Google Fonts, lokalnu kopiju fonta, Bootstrap tipografiju, a također može asinhrono učitati fontove. Ovo je interaktivna demo stranica.
8. Napišite SVG
Jeste li se ikada zapitali kako bi bilo cool pisati SVG u CSS datoteke? Pomoću Write SVG PostCSS dodatka lako možete postići ovaj cilj.
Ovaj praktični dodatak, primjerice, omogućuje pohranite SVG pozadine i ikone u CSS datoteku, i kasnije dodajte ih u relevantni HTML element na sljedeći način:
@svg square @rect fill: var (- boja, crna); širina: 100%; visina: 100%; .example pozadina: bijela svg (kvadratna param (- boja # 00b1ff)) naslovnica;
9. Izgubljena mreža
Izgubljena mreža je odličan PostCSS dodatak koji vam pruža impresivan CSS mrežni sustav to ne znači samo radi s običnim CSS-om ali i sa jezika pretprocesora (Sass, MANJE, Stylus). Ona koristi izračunato () CSS funkcija za stvaranje lijepe rešetke koje možete jednostavno koristiti bez trošenja previše vremena s prilagodbom.
Izgubljena mreža ima prilično jednostavna pravila, na primjer, definiranje stupca sa 25% širine ne uzima više od ovog malog isječka koda:
div izgubljena kolona: 1/4;
10. PostCSS Sprites
PostCSS Sprite dodatak olakšava generirati slikovne spriteove, tj. zbirke slika smještenih u jednu datoteku. Nakon što ste postavili nekoliko opcija, dodatak uzima slike iz vaše datoteke stila, spaja ih u sprite, a zatim ažurira reference slike gdje god je to potrebno.
Možete koristiti različite filtre i skupne skupine da biste odredili koje slike želite staviti u duh, a možete postaviti i dimenzije izlazne slike..
