10 Félelmetes PostCSS bővítmények CSS varázslóvá

A PostCSS egy hihetetlenül sokoldalú eszköz, amely lehetővé teszi a CSS-stílusok átalakítása JavaScript-bővítményekkel. Rugalmassága abban rejlik, hogy épült.

A PostCSS központi része egy Node.js modul, amelyet npm-rel lehet telepíteni, és több mint 200 plugin ökoszisztémája van, amelyet a projektben használhat..

A PostCSS sem előfeldolgozó, sem utófeldolgozó, mivel a PostCSS különböző pluginjei ezekbe a kategóriákba vagy mindkettőbe tartozhatnak; teljesen attól függ, hogy mit csinálsz. A PostCSS segítségével nem kell más szintaxist tanulni mint Sass vagy LESS esetében; azonnal elkezdheti használni.

A PostCSS átveszi a meglévő CSS-fájlját, és JavaScript-olvasható adatokká alakítja, majd a JavaScript-bővítmények végrehajtják a módosításokat, és a PostCSS visszaadja az eredeti fájl módosított változatát. Hűvösnek tűnik, nem?

Ebben a hozzászólásban megnézzük a 10 PostCSS bővítményt betekintést nyújthat néhány nagyszerű dologhoz, amit elérhet ezzel a félelmetes eszközzel.

1. Autoprefixer

Autoprefixer talán a legismertebb PostCss plugin, mivel ezt a figyelemre méltó tech cégek, például a Google, a Twitter és a Shopify használják. Azt hozzáadja a szállító előtagjait a CSS szabályaihoz, ahol szükséges.

Az Autoprefixer az Adatok felhasználásától származó adatokat használ. Ily módon nem kerül napvilágra, és mindig alkalmazhatja a legutóbbi szabályokat. Megnézheti, hogyan működik az interaktív bemutatóhelyén.

2. CSSnext

CSSnext Ez egy CSS-t fordítja át lehetővé teszi a jövőbeni CSS szintaxis használatát az aktuális webhelyeken. A W3C-nek számos új CSS-szabálya van, amelyeket a böngészők jelenleg nem hajtanak végre, de lehetővé teszik a fejlesztők számára, hogy gyorsabban és könnyebben írjanak kifinomultabb CSS-t. A CSS-t azért hoztuk létre, hogy áthidaljuk ezt a rést.

Érdemes megnézni annak jellemzőit, hogy lássa, mit érhet el vele, például egyéni média lekérdezéseket, egyéni szelektorokat, színmódosítókat, SVG-szűrőket és új pszeudokosztályokat használjon a tervekben.

3. PreCSS

PreCSS az egyik PstCSS plugin, amely úgy működik, mint egy CSS előfeldolgozó. Lehetővé teszi használja ki a Sass-szerű jelölést a rendezvényfájljaiban.

A PreCSS bevezetésével a munkafolyamatban változókat használhat, ha más nyilatkozatok, mert hurkok, keverékek, @extend és @import szabályok, fészkelő és sok más praktikus funkció a CSS kódjában. Az PreCSS Github dokumentációjában részletes útmutatást adunk arról, hogyan lehet a legtöbbet kihozni.

4. StyleLint

StyleLint egy modern CSS linter kiigazítja és hitelesíti a CSS kódját. Ez megkönnyíti a hibák elkerülését és a következetes kódolási egyezmények követését.

A StyleLint megérti a legfrissebb CSS szintaxist, így a korábban említett PreCSS pluginnel együtt használható. Azt is lehetővé teszi, hogy saját konfigurációt készítsen, és még akkor is ellenőrizze, hogy a beállítások érvényesek-e.

5. PostCSS eszközök

A PostCSS Assets plugin egy praktikus a CSS-fájlok eszközkezelője. Nagyszerű választás lehet, ha az URL-útvonalakkal kapcsolatos problémák merülnek fel, mivel a PostCSS eszközök elkülönítik a stíluslapfájlokat a környezeti változásoktól.

Meg kell határoznia a terhelési útvonalakat, a relatív útvonalakat és a bázisútvonalat, és a bővítmény automatikusan megkeresi a szükséges eszközöket. Például az alábbi kódot írhatja be, ha a megfelelő URL-címre van szüksége foobar.jpg kép:

 test háttér: megoldás ('foobar.jpg'); 

PostCSS eszközök is gondoskodik az eszközök gyorsítótáráról, beállíthatja a cachebuster változó a true értékre, ha azt szeretné, hogy az URL-útvonalak automatikusan módosuljanak, ha egy eszköz módosul. Ez az intelligens bővítmény kiszámítja a képfájlok méreteit (szélességét és magasságát), vagy átméretezi őket előre beállított arányban.

6. CSSNano

Ha egy termelési helyhez optimalizált és minigált CSS-fájlokra van szükség, érdemes megnézni CSSNano. Ez egy moduláris plugin, amely sok kisebb, egy felelősségteljes PostCSS bővítményből áll. Nemcsak az alapvető minigációs technikákat, mint például a helyek eltávolítását teszi lehetővé, hanem olyan speciális opciókat is tartalmaz, amelyek fókuszált optimalizálást tesznek lehetővé.

Számos egyéb funkció közül a CSSNano képes újraindítani a z-index értékeket, csökkentve az egyéni azonosítókat, átalakítva a hosszúság, az idő és a színértékeket, és eltávolítva az elavult eladótagokat.

7. Betűtípus bűvész

Ha kifinomult tipográfia rajongója vagy, akkor biztosan tetszeni fog Betűtípus bűvész PostCSS bővítmény. A betűtípus varázsló mágiája a automatikusan létrehozza az összes szükségeset @ Font-face szabályok.

Hogy működik, elég egyszerű, csak hozzá kell adnod font-family: "My Fav Font"; A CSS szabály egy HTML elemre vonatkozik, és a betűtípus bűvész végzi a munkát. Hozzáadhat Google Betűtípusokat, a betűtípus helyi másolatát, a Bootstrap tipográfiát, és aszinkron betűkészleteket is betölthet. Itt van az interaktív bemutatóhelye.

8. Írjon SVG-t

Gondolkozott már azon, hogy milyen hűvös lenne az SVG-t írni a CSS-fájljaiba? Az írás SVG PostCSS bővítmény segítségével könnyen elérheti ezt a célt.

Ez a praktikus plugin például lehetővé teszi tárolja az SVG hátterét és ikonjait a CSS fájlban, és később add hozzá őket a megfelelő HTML elemhez a következő módon:

 @svg négyzet @rect fill: var (- szín, fekete); szélesség: 100%; magasság: 100%;  .példa háttér: fehér svg (négyzet param (- színes # 00b1ff)) borító; 

9. Elveszett rács

Elveszett rács egy nagyszerű PostCSS bővítmény, amely lenyűgöző CSS hálózatrendszer ez nem csak egyszerű CSS-sel működik de mégis előfeldolgozó nyelvek (Sass, LESS, Stylus). Használja a Calc () A CSS funkció olyan gyönyörű rácsokat hoz létre, amelyeket könnyen használhat anélkül, hogy túl sok időt töltene a testreszabással.

A Lost Grid-nek elég egyszerű szabályai vannak, például a 25% -os szélességű oszlop meghatározása nem több, mint ez a kis kódrészlet:

 div elveszett oszlop: 1/4; 

10. PostCSS Sprites

A PostCSS Sprite plugin megkönnyíti kép spritek létrehozása, vagyis egyetlen fájlba helyezett képek gyűjteményei. Néhány opció beállítása után a bővítmény a stíluslapfájlból veszi a képeket, egyesíti őket egy sprite-ba, majd frissíti a kép hivatkozásokat, ahol csak szükséges.

Különböző szűrőket és csoportosítókat használhat arra, hogy meghatározza, hogy mely képeket kívánja elhelyezni a sprite-ba, és beállíthatja a kimeneti kép méretét is.