10 Awesome PostCSS -liitännät, joiden avulla voit tehdä CSS-ohjatun toiminnon

PostCSS on uskomattoman monipuolinen työkalu, joka mahdollistaa muuntaa CSS-tyylit JavaScript-laajennuksilla. Sen joustavuus perustuu siihen, miten se on rakennettu.

PostCSSin keskeinen osa on Node.js-moduuli, jonka voit asentaa npm: llä, ja sillä on yli 200 pluginin ekosysteemi, jonka voit käyttää projektissasi.

PostCSS ei ole esiprosessori eikä jälkiprosessori, koska eri PostCSS-laajennukset voivat kuulua jompaankumpaan näistä ryhmistä tai molemmista; se riippuu täysin siitä, mitä teet sen. PostCSS: n kanssa ei tarvitse oppia eri syntaksi kuten Sassin tai LESSin tapauksessa; voit heti alkaa käyttää sitä.

PostCSS ottaa olemassa olevan CSS-tiedoston ja muuntaa sen JavaScript-luettaviksi tiedoiksi, sitten JavaScript-laajennukset suorittavat muutokset ja PostCSS palauttaa alkuperäisen tiedoston muokatun version. Kuulostaa viileältä, eikö?

Tässä viestissä tarkastelemme 10 PostCSS-laajennusta antaa sinulle käsityksen eräistä suurista asioista, joita voit saavuttaa tämä mahtava työkalu.

1. Autoprefikseri

Autoprefixer on todennäköisesti tunnetuin PostCss-laajennus, koska sitä käyttävät merkittävät teknologiayritykset, kuten Google, Twitter ja Shopify. Se lisää toimittajan etuliitteitä CSS-sääntöihin, jos se on tarpeen.

Autoprefixer käyttää tietoja käyttäjältä Can I Use. Näin se ei päivity, ja voi aina soveltaa uusimpia sääntöjä. Voit tarkistaa, miten se toimii interaktiivisessa demo-sivustossa.

2.Seuraava

CSSnext on CSS, joka transpiloi sen voit käyttää tulevaa CSS-syntaksia nykyisillä sivustoilla. W3C: llä on monia uusia CSS-sääntöjä, joita selaimet eivät tällä hetkellä toteuta, mutta joiden avulla kehittäjät voivat kirjoittaa entistä kehittyneempiä CSS: iä nopeammin ja helpommin. CSSnext on tehty tämän aukon poistamiseksi.

On syytä tarkastella sen ominaisuuksia nähdäksesi, mitä voit tehdä sen avulla, esimerkiksi käytä mukautettuja mediakyselyjä, mukautettuja valitsimia, värimuutoksia, SVG-suodattimia ja uusia pseudoklasseja malleissa.

3. PreCSS

PreCSS on yksi PstCSS-laajennuksista, jotka toimivat kuten CSS-esiprosessori. Se mahdollistaa hyödyntää Sass-tyyppistä merkintää sytlesheet-tiedostoissasi.

Käyttämällä PreCSS: ia työnkulkuun voit käyttää muuttujia, tai muuten lausuntoja, varten silmukat, sekoittimet, @extend ja @tuonti säännöt, pesiminen ja monet muut kätevät ominaisuudet CSS-koodissasi. PreCSS: n Github-dokumentaatio antaa sinulle yksityiskohtaiset ohjeet siitä, miten voit hyödyntää sitä.

4. StyleLint

StyleLint on moderni CSS-linteri oikolukuja ja vahvistaa CSS-koodisi. Sen avulla on helppo välttää virheitä ja pakottaa noudattamaan johdonmukaisia koodaussopimuksia.

StyleLint ymmärtää uusimman CSS-syntaksin, joten sitä voidaan käyttää yhdessä aiemmin mainitun PreCSS-laajennuksen kanssa. Sen avulla voit myös tehdä oman kokoonpanon ja tarkistaa, onko asetukset voimassa.

5. PostCSS-varat

PostCSS Assets -lisäosa on kätevä CSS-tiedostojen omaisuudenhoitaja. Se voi olla hyvä valinta, jos sinulla on usein ongelmia URL-polkujen kanssa, koska PostCSS-varat eristävät tyylitaulukon tiedostot ympäristömuutoksista.

Sinun on määriteltävä kuorman polut, suhteelliset polut ja perusreitti, ja laajennus etsii automaattisesti tarvitsemasi varat. Voit esimerkiksi kirjoittaa seuraavan koodin, jos tarvitset oikean URL-osoitteen foobar.jpg kuva:

 kehon tausta: ratkaise ('foobar.jpg');

Myös PostCSS-varat huolehtii varojen välimuistista, kuten voit asettaa CACHEBUSTER muuttuja on true, jos haluat, että URL-polkuja muutetaan automaattisesti, jos omaisuus muutetaan. Tämä älykäs laajennus laskee myös kuvatiedostojen mitat (leveys ja korkeus) tai muuttaa niiden kokoa käyttämällä ennalta määritettyä suhdetta.

6. CSSNano

Jos tarvitset optimoidut ja pienennetyt CSS-tiedostot tuotantopaikalle, kannattaa tarkistaa CSSNano. Se on modulaarinen plugin, joka koostuu monista pienemmistä, yhden vastuullisen PostCSS-laajennuksista. Se ei suorita pelkästään perusvalmistustekniikoita, kuten välilyöntien poistamista, vaan siinä on myös lisäasetuksia, jotka mahdollistavat tarkennetut optimoinnit.

Monien muiden ominaisuuksien joukossa CSSNano pystyy uusimaan z-indeksiarvoja, vähentämään mukautettuja tunnisteita, muuntaa pituus-, aika- ja väriarvot sekä poistamaan vanhentuneet valmistajan etuliitteet.

7. Fontin taikuri

Jos olet hienostuneen typografian fani, pidät varmasti Fontin taikuri PostCSS-laajennus. Font magicianin taika perustuu sen kykyyn luodaan automaattisesti kaikki tarvittavat @ Font-face säännöt.

Miten se toimii on melko yksinkertaista, sinun tarvitsee vain lisätä font-family: "My Fav Font"; CSS-sääntö HTML-elementtiin ja Font Magician tekee loput työstä. Se voi lisätä Google-fontteja, fontin paikallista kopiota, Bootstrap-typografiaa ja myös ladata fontteja asynkronisesti. Tässä on sen interaktiivinen demo-sivusto.

8. Kirjoita SVG

Oletko koskaan miettinyt, kuinka siistiä olisi kirjoittaa SVG suoraan CSS-tiedostoihisi? Kirjoita SVG PostCSS -laajennuksen avulla tämä tavoite helposti.

Tämä kätevä lisäosa mahdollistaa esimerkiksi tallenna SVG-taustat ja -kuvakkeet CSS-tiedostoon, ja myöhemmin lisää ne HTML-elementtiin seuraavalla tavalla:

 @svg-aukio @rect fill: var (- väri, musta); leveys: 100%; korkeus: 100%;  .esimerkki tausta: valkoinen svg (neliön param (- väri # 00b1ff)) kansi;

9. Lost Grid

Lost Grid on loistava PostCSS-laajennus, joka tarjoaa sinulle vaikuttavan CSS-verkkojärjestelmä se ei ole vain toimii tavallisen CSS: n kanssa mutta myös esikäsittelijän kielet (Sass, LESS, Stylus). Se käyttää laskettu () CSS-toiminto luo kauniita verkkoja, joita voit helposti käyttää ilman, että käytät liikaa aikaa räätälöintiin.

Lost Gridillä on melko yksinkertaiset säännöt, esimerkiksi 25 prosentin leveyden osoittavan sarakkeen määrittelyssä ei oteta enempää kuin tämä pieni koodinpätkä:

 div lost-column: 1/4;

10. PostCSS Sprites

PostCSS Sprite plugin on helppo tuottaa kuva-spriittejä, toisin sanoen kuvakokoelmat, jotka on sijoitettu yhteen tiedostoon. Kun olet valinnut muutamia vaihtoehtoja, laajennus ottaa kuvat tyylitaulukon tiedostosta, yhdistää ne sprite-muotoon, päivittää sitten kuva-viitteet aina, kun se on tarpeen.

Voit käyttää erilaisia suodattimia ja ryhmittelijöitä selvittääksesi, mitkä kuvat haluat sijoittaa spriteen, ja voit määrittää myös ulostulokuvan mitat.