10 Úžasné doplnky PostCSS, ktoré vám pomôžu vytvoriť sprievodcu CSS
PostCSS je neuveriteľne všestranný nástroj, ktorý umožňuje transformovať štýly CSS pomocou doplnkov JavaScriptu. Jeho flexibilita spočíva v tom, ako je postavená.
Hlavná časť programu PostCSS je modul Node.js, ktorý môžete nainštalovať s npm a má ekosystém s viac ako 200 doplnkami, ktoré môžete použiť vo svojom projekte.
PostCSS nie je ani preprocesor, ani postprocesor, pretože rôzne plug-iny PostCSS môžu spadať do jednej z týchto kategórií, alebo obidvoch z nich; záleží úplne na vás, čo robíte z toho. S PostCSS, vy nemusia sa naučiť inej syntaxe ako v prípade Sass alebo LESS; môžete ho okamžite začať používať.
PostCSS prevezme váš existujúci súbor CSS a zmení ho na údaje čitateľné v jazyku JavaScript, potom modifikácie pluginov JavaScript a PostCSS vráti zmenenú verziu pôvodného súboru. Znie to cool, nie?
V tomto príspevku sa pozrieme na 10 doplnkov PostCSS vám dá prehľad o niektorých skvelých veciach, ktoré môžete dosiahnuť s týmto úžasným nástrojom.
1. Autoprefixer
Autoprefixer je pravdepodobne najznámejší doplnok PostCss, pretože ho používajú významné tech spoločnosti ako Google, Twitter a Shopify. to pridáva predpony predajcov k pravidlám CSS tam, kde je to potrebné.
Autoprefixer používa údaje zo služby I Can Use. Týmto spôsobom nie je dostatočne datovaný a môže vždy použiť najnovšie pravidlá. Môžete sa pozrieť, ako funguje na jeho interaktívnom demo stránke.
2. CSSnext
CSSnext je CSS transpiler, ktorý umožňuje používať budúcu syntax CSS na aktuálnych stránkach. W3C má mnoho nových pravidiel CSS, ktoré nie sú v súčasnosti implementované prehliadačmi, ale môžu umožniť vývojárom rýchlejšie a jednoduchšie písať sofistikovanejšiu CSS. CSSnext bolo vytvorené na preklenutie tejto medzery.
Stojí za to pozrieť sa na jeho funkcie, aby ste videli, čo s ním môžete dosiahnuť, napríklad môžete použite vlastné mediálne dopyty, vlastné výbery, modifikátory farieb, filtre SVG a nové pseudoklasy vo svojich dizajnoch.
3. PreCSS
PreCSS je jeden z pluginov PstCSS, ktoré fungujú ako preprocesor CSS. Umožňuje to využite značku Sass vo vašich súboroch so systé- mom.
Zavedením PreCSS do svojho pracovného postupu môžete použiť premenné, if-else vyhlásenie, pre slučky, mixiny, @extend a @import pravidlá, hniezdenie a mnoho ďalších funkcií vo vašom kóde CSS. Dokumentácia Github preCSS vám poskytuje podrobné pokyny na čo najlepšie využitie.
4. StyleLint
StyleLint je moderná CSS linter overuje a overuje váš kód CSS. Umožňuje jednoduché vyhnúť sa chybám a presadzovať dodržiavanie konvenčných kódovacích konvencií.
StyleLint chápe najnovšiu syntax CSS, takže ju môžete použiť spolu s predtým uvedeným doplnkom PreCSS. Umožňuje tiež vytvoriť si vlastnú konfiguráciu a dokonca skontroluje, či sú vaše nastavenia platné.
5. aktíva PostCSS
Doplnok PostCSS Assets je praktický Správca prostriedkov pre vaše súbory CSS. Môže to byť skvelá voľba, ak máte tendenciu mať problémy s cestami URL, pretože PostCSS Assets izoluje vaše súbory so štýlmi zo zmien životného prostredia.
Musíte definovať cesty zaťaženia, relatívne cesty a základnú cestu a plugin automaticky vyhľadá požadované prostriedky. Napríklad môžete napísať nasledujúci kód, ak potrebujete správnu adresu URL foobar.jpg image:
telo background: resolve ('foobar.jpg'); PostCSS Assets tiež stará sa o vyrovnávaciu pamäť aktív, ako môžete nastaviť CACHEBUSTER premenná na hodnotu true, ak chcete, aby sa cesty URL automaticky zmenili v prípade zmeny aktíva. Tento inteligentný doplnok tiež vypočítava rozmery (šírku a výšku) obrazových súborov alebo dokonca ich mení pomocou prednastaveného pomeru.
6. CSSNano
Ak potrebujete optimalizované a minimalizované súbory CSS pre výrobné stránky, stojí za to sa pozrieť CSSNano. Je to modulárny plugin, ktorý sa skladá z mnohých menších jednoúčelových doplnkov PostCSS. Nie je možné vykonávať iba základné techniky minimalizácie, napríklad odstraňovanie bielych priestorov, ale aj rozšírené možnosti, ktoré umožňujú cielené optimalizácie.
Medzi mnohými ďalšími funkciami je CSSNano schopný prepracovať hodnoty indexu z, znížiť vlastné identifikátory, premeniť dĺžku, čas a hodnoty farieb a odstrániť zastarané predpony dodávateľov.
7. Font Magician
Ak ste fanúšik sofistikovanej typografie, určite sa vám páči Font Magician Doplnok PostCSS. Magic Font Magician sa spolieha na svoju schopnosť automaticky generuje všetky potrebné @ Font-face pravidlá.
Ako to funguje je dosť jednoduché, stačí len pridať font-family: "My Fav písmo"; Pravidlo CSS na prvok HTML a Font Magician vykonáva zvyšok práce. Môže pridať písma Google, lokálnu kópiu písma, typografiu Bootstrap a tiež môžete načítať písma asynchrónne. Tu je jeho interaktívne demo stránky.
8. Napíšte SVG
Premýšľali ste niekedy o tom, ako by bolo dobré písať SVG priamo do súborov CSS? S pomocou doplnku Write SVG PostCSS môžete tento cieľ ľahko dosiahnuť.
Tento praktický doplnok to napríklad umožňuje uložte SVG pozadia a ikony do vášho súboru CSS, a neskôr pridajte ich do príslušného elementu HTML nasledujúcim spôsobom:
@svg štvorcový @rect fill: var (- farba, čierna); šírka: 100%; výška: 100%; . príklad background: biela svg (štvorcový param (- farba # 00b1ff)) kryt;
9. Stratený grid
Stratená mriežka je skvelý doplnok PostCSS, ktorý vám poskytne impozantný CSS sieťový systém to nielenže pracuje s jednoduchým CSS ale aj s jazyky preprocesora (Sass, LESS, Stylus). Používa vypočítané () Funkcia CSS vytvára krásne mriežky, ktoré môžete ľahko používať bez toho, aby ste museli prispôsobiť svoje nastavenie.
Lost Grid má skoro priame pravidlá, napríklad definovanie stĺpca s 25% šírkou nevyžaduje viac ako tento malý útržok kódu:
div stratený-stĺpec: 1/4;
10. PostCSS Sprites
PostCSS Sprite plugin umožňuje ľahko generovať obrazové skryty, t. j. zbierok obrázkov umiestnených do jedného súboru. Po nastavení niekoľkých možností plugin pridáva obrázky z vášho súboru zo šablón štýlov, zlúči ich do súboru a potom aktualizuje odkazy na obrázky všade tam, kde je to potrebné.
Pomocou rôznych filtrov a zoskupení môžete určiť, ktoré obrázky chcete vložiť do súboru a môžete tiež nastaviť rozmery výstupného obrazu.
