10 úžasné pluginy PostCSS, aby vám CSS průvodce
PostCSS je neuvěřitelně všestranný nástroj, který umožňuje transformovat CSS styly s JavaScript pluginy. Jeho flexibilita spočívá ve způsobu, jakým je postavena.
Hlavní součástí PostCSS je modul Node.js, který můžete nainstalovat pomocí npm, a má ekosystém s více než 200 zásuvnými moduly, které můžete použít ve svém projektu..
PostCSS není ani preprocesor, ani postprocesor, protože různé PostCSS pluginy mohou spadat do jedné z těchto kategorií nebo do obou; záleží zcela na vás, co z toho uděláte. S PostCSS, vy nemusíte se učit jinou syntaxi jako v případě Sass nebo LESS; můžete okamžitě začít používat.
PostCSS vezme váš existující soubor CSS a změní jej na data čitelná JavaScriptem, pak pluginy JavaScriptu provedou úpravy a PostCSS vrátí upravenou verzi původního souboru. Zní to dobře, ne?
V tomto příspěvku se podíváme na 10 pluginů PostCSS vám umožní nahlédnout do některých velkých věcí, které můžete dosáhnout s tímto úžasným nástrojem.
1. Autoprefix
Autoprefix je pravděpodobně nejznámějším pluginem PostCss, který používají pozoruhodné technologické společnosti jako Google, Twitter a Shopify. To přidává předpony dodavatele k pravidlům CSS tam, kde je to nutné.
Autoprefixer používá data z Can I Use. Tímto způsobem není datován a může vždy použít nejnovější pravidla. Můžete se podívat, jak to funguje na jeho interaktivní demo stránce.
2. CSSnext
CSSnext je CSS transpiler umožňuje používat budoucí syntaxi CSS na aktuálních stránkách. W3C má mnoho nových CSS pravidel, která nejsou v současné době implementována prohlížeči, ale mohla by vývojářům umožnit rychlejší a jednodušší psaní sofistikovanějších CSS. CSSnext byl vytvořen k překonání této mezery.
Stojí za to podívat se na jeho vlastnosti, abyste viděli, co s ním můžete dosáhnout, například můžete používat vlastní mediální dotazy, vlastní selektory, modifikátory barev, SVG filtry a nové pseudoclassy ve vašich návrzích.
3. PreCSS
PreCSS je jeden z PstCSS pluginů, které fungují jako CSS preprocesor. To umožňuje Využívejte značek typu Sass ve vašich souborech.
Zavedením PreCSS do vašeho pracovního postupu můžete použít proměnné, if-else prohlášení, pro smyčky, mixiny, @rozšířit a @import pravidla, vnoření a mnoho dalších užitečných funkcí v kódu CSS. Dokumentace Github společnosti PreCSS vám poskytuje podrobné pokyny, jak toho dosáhnout.
4. StyleLint
StyleLint je moderní CSS linter, který kontroluje a ověřuje váš kód CSS. To usnadňuje vyhnout se chybám a tlačí vás následovat konzistentní konvence kódování.
StyleLint rozumí nejnovější syntaxi CSS, takže ji lze použít spolu s dříve zmíněným pluginem PreCSS. Umožňuje také vytvořit vlastní konfiguraci a dokonce zkontrolovat, zda jsou vaše nastavení platná.
5. PostCSS aktiva
Plugin PostCSS Assets je užitečný Správce aktiv pro vaše soubory CSS. Může to být skvělá volba, pokud máte tendenci s problémy s adresami URL, protože PostCSS Assets izoluje vaše soubory stylů před změnami prostředí.
Musíte definovat cesty zatížení, relativní cesty a základní cestu a plugin automaticky vyhledá potřebná aktiva. Například můžete napsat následující kód, pokud potřebujete správnou adresu URL foobar.jpg obraz:
body background: solution ('foobar.jpg'); PostCSS Aktiva také stará se o mezipaměť aktiv, jak můžete nastavit cachebuster Pokud chcete, aby byly cesty URL automaticky změněny v případě, že je aktivum změněno, nastavte proměnnou na hodnotu true. Tento inteligentní plugin také počítá rozměry (šířku a výšku) obrazových souborů, nebo dokonce mění jejich velikost pomocí přednastaveného poměru.
6. CSSNano
Pokud potřebujete optimalizované a minifikované CSS soubory pro produkční stránku, stojí za to se podívat CSSNano. Jedná se o modulární plugin, který se skládá z mnoha menších plug-inů PostCSS. Neprovádí pouze základní techniky minifikace, jako je například odstraňování prázdných míst, ale má také pokročilé možnosti, které umožňují cílené optimalizace.
Mezi mnoha dalšími funkcemi je CSSNano schopno znovu nastavit hodnoty indexu z, snížit vlastní identifikátory, převést délku, čas a hodnoty barev a odstranit zastaralé předpony dodavatele..
7. Font Magician
Pokud jste fanouškem sofistikované typografie, určitě se vám bude líbit Font Magician PostCSS plugin. Kouzlo Font Magician spoléhá na jeho schopnost automaticky generuje všechny potřebné @ font-face pravidla.
Jak to funguje je velmi jednoduché, stačí přidat font-family: "My Fav Font"; CSS pravidlo na HTML element, a Font kouzelník dělá zbytek práce. Je možné přidat fonty Google, místní kopii písma, typografii spouštěcího balíčku a také asynchronní načítání písem. Zde je její interaktivní demo stránka.
8. Napište SVG
Přemýšleli jste někdy o tom, jak cool by bylo psát SVG přímo do vašich CSS souborů? Pomocí pluginu Write SVG PostCSS můžete tento cíl snadno dosáhnout.
Tento šikovný plugin například umožňuje uložit SVG pozadí a ikony do vašeho CSS souboru, a později přidejte je do příslušného HTML elementu následujícím způsobem:
@svg square @rect fill: var (- barva, černá); šířka: 100%; výška: 100%; .example background: white svg (square param (- color # 00b1ff)) cover;
9. Ztracená mřížka
Ztracená mřížka je skvělý plugin PostCSS, který vám poskytne působivý CSS grid systém to není jen pracuje s prostým CSS ale také s předprocesorové jazyky (Sass, LESS, Stylus). Používá calc () CSS funkce vytvořit krásné mřížky, které můžete snadno používat, aniž by trávili příliš mnoho času s přizpůsobením.
Ztracená mřížka má téměř jasná pravidla, například definování sloupce s 25% šířkou nepotřebuje více než tento malý fragment kódu:
div lost-column: 1/4;
10. PostCSS Sprité
PostCSS Sprite plugin usnadňuje generovat skvrny obrazu, tj. sbírky obrazů umístěných do jediného souboru. Po nastavení několika možností, plugin vezme obrázky ze souboru stylesheetu, sloučí je do sprite a pak aktualizuje odkazy na obrázky všude tam, kde je to nutné..
Pomocí různých filtrů a seskupení můžete určit, které obrázky chcete vložit do sprite, a také můžete nastavit rozměry výstupního obrazu..
