10 Awesome PostCSS pluginad, mis muudavad teid CSS viisardiks
PostCSS on uskumatult mitmekülgne tööriist, mis võimaldab CSS-stiilide teisendamine JavaScripti pluginatega. Selle paindlikkus seisneb selles, kuidas see on ehitatud.
PostCSSi põhiosa on moodul Node.js, mida saab installida npm-ga ja millel on rohkem kui 200 plugina ökosüsteem, mida saate oma projektis kasutada.
PostCSS ei ole ei eeltöötleja ega järeltöötleja, kuna erinevad PostCSS-i pluginad võivad kuuluda ühte neist kategooriatest või mõlemast; see sõltub täielikult sinust sellest, mida te sellest teete. PostCSSi abil ei pea õppima teist süntaksit nagu Sass või LESS; saate kohe seda kasutada.
PostCSS võtab teie olemasoleva CSS-faili ja muudab selle JavaScripti loetavateks andmeteks, siis JavaScript-pluginad teevad muudatused ja PostCSS tagastab muudetud faili muudetud versiooni. Kõlab lahe, kas pole?
Selles postituses vaatame 10 PostCSS-i pluginaid annan teile ülevaate mõnest suurest võimalikust asjast selle vinge vahendiga.
1. Autoprefikser
Autoprefikser on tõenäoliselt kõige tuntum PostCss plugin, kuna seda kasutavad märkimisväärsed tehnoloogilised ettevõtted nagu Google, Twitter ja Shopify. See lisab CSS-i eeskirjadele tarnija eesliited, kui see on vajalik.
Autoprefixer kasutab andmeid, mida saab kasutada. Nii see ei kesta ja saab alati rakendada kõige värskemaid reegleid. Saate vaadata, kuidas see interaktiivses demo-saidis toimib.
2. Järgmine
CSSnext on CSS-i transpilatsioon võimaldab kasutada tulevasi CSS-i süntaksit praegustes saitides. W3C-l on palju uusi CSS-reegleid, mida brauserid praegu ei rakenda, kuid võimaldavad arendajatel kirjutada keerukamaid CSS-e kiiremini ja lihtsamalt. Selle lõhe ületamiseks on tehtud järgmine CSS.
Tasub uurida selle omadusi, et näha, mida saate sellega saavutada, näiteks kasutage kohandatud meediumipäringuid, kohandatud valikuid, värvi modifikaatoreid, SVG filtreid ja uusi pseudoklasse oma disainilahendustes.
3. PreCSS
PreCSS on üks PstCSS-i pluginatest, mis toimivad nagu CSS-i eeltöötleja. See võimaldab kasutage Sass-tüüpi märgistust oma lehtede failides.
PreCSS-i juurutamisega oma töövoogu saab kasutada muutujaid, kui-muidu avaldused, jaoks silmused, segud, @extend ja @import reeglid, pesitsemine ja paljud teised CSS-koodi mugavad funktsioonid. PreCSSi Githubi dokumentatsioon annab teile üksikasjalikud juhised selle kasutamise kohta.
4. StyleLint
StyleLint see on kaasaegne CSS linter korrigeerib ja kinnitab teie CSS-koodi. See muudab vigade vältimise lihtsaks ja viib teid järgima järjekindlaid kodeerimisreegleid.
StyleLint mõistab viimast CSS süntaksit, nii et seda saab kasutada koos eelnevalt mainitud PreCSS pluginaga. See võimaldab teil ka ise seadistada ja isegi kontrollida, kas teie seaded kehtivad.
5. PostCSS-varad
PostCSSi varade plugin on mugav CSS-failide varahaldur. See võib olla suurepärane valik, kui teil on URL-teedega probleeme, kuna PostCSS-i varad eristavad teie stiililehtede failid keskkonnamuutustest.
Peate määrama koormusteed, suhtelised teed ja baasraja ning plugin otsib automaatselt vajalikke varasid. Näiteks võite kirjutada järgmise koodi, kui vajate õige URL-i foobar.jpg pilt:
keha taust: lahendus ('foobar.jpg'); Ka PostCSS-i varad hoolitseb varade vahemälu eest, nagu saate määrata vahemälu muutuvad väärtuseks true, kui soovite, et URL-i marsruute muudetakse automaatselt, kui vara on muudetud. See nutikas plugin arvutab ka pildifailide mõõtmed (laius ja kõrgus) või suurendab nende suurust eelseadistatud suhtega.
6. CSSNano
Kui vajate tootmiskoha jaoks optimeeritud ja minifitseeritud CSS-faile, tasub vaadata CSSNano. See on modulaarne plugin, mis koosneb paljudest väiksematest, ühe vastutusega PostCSS pluginatest. See ei tee ainult põhilisi minimeerimismeetodeid, nagu tühimärkide eemaldamine, vaid ka täiustatud valikuid, mis muudavad fokuseeritud optimeerimise võimalikuks.
Paljude teiste funktsioonide hulgas on CSSNano võimeline z-indeksi väärtusi taaskasutama, vähendades kohandatud identifikaatoreid, teisendades pikkuse, aja ja värvi väärtusi ning eemaldades vananenud müüja eesliited.
7. Kirjasuurik
Kui olete keeruka tüpograafia fänn, siis kindlasti meeldib see Kirjasuurik PostCSS plugin. Font Magician maagia tugineb selle võimekusele automaatselt kõik vajalikud @ font-face eeskirjad.
Kuidas see toimib, on üsna lihtne, peate ainult lisama font-family: "Minu Fav Font"; CSS reegel HTML elemendile ja Font Magician teeb ülejäänud töö. See võib lisada Google'i fondid, fondi kohaliku koopia, Bootstrap-tüpograafia ja ka fontide laadimise asünkroonselt. Siin on selle interaktiivne demo sait.
8. Kirjutage SVG
Kas olete kunagi mõelnud, kui lahe oleks kirjutada SVG otse oma CSS-failidesse? Kirjutage SVG PostCSS plugina abil saate selle eesmärgi kergesti saavutada.
See mugav plugin võimaldab näiteks salvestage oma SVG taustad ja ikoonid oma CSS faili, ja hiljem lisage need vastavasse HTML-elementi järgmisel viisil:
@svg square @rect fill: var (- värv, must); laius: 100%; kõrgus: 100%; .näide taust: valge svg (ruudukujuline param (- värv # 00b1ff)) kate;
9. Kadunud võrk
Kadunud võrk on suurepärane PostCSS plugin, mis annab teile muljetavaldava CSS-võrgu süsteem see ei ole ainult töötab tavalise CSS-iga aga ka koos eelprotsessori keeled (Sass, LESS, Stylus). See kasutab Calc () CSS-funktsioon võimaldab luua ilusaid võrke, mida saate hõlpsasti kasutada ilma liiga palju aega kohandamiseta.
Lost Gridil on üsna lihtsad reeglid, näiteks 25% laiusega veeru määratlemine ei võta rohkem kui see väike koodilõik:
div lost-column: 1/4;
10. PostCSS Sprites
The PostCSS Sprite plugin muudab selle lihtsaks genereerige kujutise sprite, st kujutised, mis on paigutatud ühte faili. Pärast mõnede valikute seadistamist võtab plugin pildid oma stiilifailist, ühendab need sprite, seejärel värskendab pildi viited, kus see on vajalik.
Saate kasutada erinevaid filtreid ja grupeerijaid, et teha kindlaks, millised pildid soovid Sprite'i panna, ning saate määrata ka väljundpildi mõõtmed.
