10 Awesome PostCSS spraudņi, lai padarītu jūs par CSS vedni

PostCSS ir neticami universāls rīks, kas ļauj pārveidot CSS stilus ar JavaScript spraudņiem. Tā elastība ir tā veidošanas procesā.

PostCSS galvenā daļa ir Node.js modulis, ko var instalēt ar npm, un tai ir vairāk nekā 200 spraudņu ekosistēma, kuru varat izvēlēties, lai izmantotu savā projektā.

PostCSS nav ne priekšapstrādātājs, ne pēcprocesors, jo dažādi PostCSS spraudņi var ietilpt vienā no šīm kategorijām vai abām šīm kategorijām; tas ir atkarīgs tikai no tā, ko jūs to darāt. Ar PostCSS jūs nav nepieciešams apgūt citu sintaksi tāpat kā Sass vai LESS gadījumā; jūs varat nekavējoties sākt to izmantot.

PostCSS ņem jūsu esošo CSS failu un pārvērš to par JavaScript lasāmiem datiem, tad JavaScript spraudņi veic izmaiņas, un PostCSS atgriež sākotnējā faila izmainīto versiju. Izklausās atdzist, vai ne?

Šajā ziņojumā mēs apskatīsim 10 PostCSS spraudņus dod jums ieskatu dažās lielajās lietās, kuras jūs varat sasniegt ar šo awesome rīku.

1. Autoprefiksētājs

Autoprefiksētājs iespējams, ir vispopulārākais PostCss spraudnis, jo to izmanto nozīmīgi tehnoloģiju uzņēmumi, piemēram, Google, Twitter un Shopify. Tā pievieno pārdevēja prefiksu CSS noteikumiem, ja tas ir nepieciešams.

Autoprefixer izmanto datus no Can I Use. Tādā veidā tā nav datēta, un vienmēr var piemērot jaunākos noteikumus. Jūs varat pārbaudīt, kā tā darbojas savā interaktīvajā demonstrācijas vietnē.

2. CSSnext

CSSnext tas ir CSS ļauj izmantot nākotnes CSS sintaksi pašreizējās vietnēs. W3C ir daudz jaunu CSS noteikumu, kas pašlaik nav ieviesti pārlūkprogrammās, bet varētu ļaut izstrādātājiem ātrāk un vienkāršāk rakstīt sarežģītāku CSS. CSSnext ir veikts, lai novērstu šo plaisu.

Ir vērts apskatīt tās funkcijas, lai redzētu, ko jūs varat paveikt, piemēram, ar to izmantot pielāgotus multivides vaicājumus, pielāgotus selektorus, krāsu modifikatorus, SVG filtrus un jaunas pseudoklases jūsu dizainā.

3. PreCSS

PreCSS ir viens no PstCSS spraudņiem, kas darbojas kā CSS priekšprocesors. Tas ļauj izmantojiet Sass līdzīgu atzīmi savās laplapas failos.

Ieviešot PreCSS savā darbplūsmā, varat izmantot mainīgos, ja-cits paziņojumi, par cilpas, maisījumi, @extend un @import noteikumi, ligzdošana un daudzas citas parocīgas funkcijas jūsu CSS kodā. PreCSS Github dokumentācija sniedz detalizētus norādījumus par to, kā to izmantot.

4. StyleLint

StyleLint tas ir mūsdienīgs CSS linter korektūras un apstiprina jūsu CSS kodu. Tas atvieglo kļūdu novēršanu un seko konsekventām kodēšanas konvencijām.

StyleLint saprot jaunāko CSS sintaksi, tāpēc to var izmantot kopā ar iepriekš minēto PreCSS spraudni. Tas arī ļauj jums izveidot savu konfigurāciju un pat pārbaudīt, vai jūsu iestatījumi ir derīgi.

5. PostCSS aktīvi

PostCSS aktīvu spraudnis ir ērts CSS failu aktīvu pārvaldnieks. Tā var būt lieliska izvēle, ja mēdz būt problēmas ar URL ceļiem, jo ​​PostCSS līdzekļi izolē jūsu stilu lapas failus no vides izmaiņām.

Jums jādefinē slodzes ceļi, relatīvie ceļi un bāzes ceļš, un spraudnis automātiski meklēs nepieciešamos aktīvus. Piemēram, jūs varat uzrakstīt šādu kodu, ja jums ir nepieciešams atbilstošs URL foobar.jpg attēls:

 ķermenis fons: atrisināt ('foobar.jpg'); 

Arī PostCSS aktīvi rūpējas par aktīvu kešatmiņu, kā jūs varat iestatīt cachebuster mainās uz true, ja vēlaties, lai URL ceļi tiktu automātiski mainīti, ja aktīvs tiek pārveidots. Šis viedais spraudnis arī aprēķina attēlu failu izmērus (platumu un augstumu), vai pat izmaina tos, izmantojot iepriekš iestatītu attiecību.

6. CSSNano

Ja ražošanas vietai ir nepieciešami optimizēti un rediģēti CSS faili, ir vērts to pārbaudīt CSSNano. Tas ir modulārs spraudnis, kas sastāv no daudziem mazākiem, vienatbildīgiem PostCSS spraudņiem. Tas ne tikai veic pamata minifikācijas paņēmienus, piemēram, atstarpes noņemšanu, bet arī uzlabotas opcijas, kas ļauj veikt mērķtiecīgu optimizāciju.

CSSNano daudzās citās funkcijās spēj atjaunot z-indeksa vērtības, samazinot pielāgotos identifikatorus, konvertējot garuma, laika un krāsu vērtības un novēršot novecojušos pārdevēja prefiksu.

7. Fonta burvis

Ja esat izsmalcinātas tipogrāfijas ventilators, jums noteikti patiks Fonta burvis PostCSS spraudnis. Burvju burvju burvība balstās uz tās spēju automātiski ģenerē visu nepieciešamo @ font-face noteikumiem.

Kā tas darbojas, ir diezgan vienkārši, jums tikai jāpievieno font-family: "My Fav Font"; CSS noteikums HTML elementam un Font Magician dara pārējo darbu. Tā var pievienot Google fontus, fontu lokālo kopiju, Bootstrap tipogrāfiju un var arī ielādēt fontus asinhroni. Šeit ir tā interaktīvā demonstrācijas vietne.

8. Uzrakstiet SVG

Vai esat kādreiz domājuši par to, cik foršs būtu rakstīt SVG tieši jūsu CSS failos? Ar rakstīt SVG PostCSS spraudni jūs varat viegli sasniegt šo mērķi.

Piemēram, šis ērts spraudnis ļauj saglabāt savu SVG fonu un ikonas savā CSS failā, un vēlāk pievienojiet tos attiecīgajam HTML elementam šādā veidā:

 @svg square @rect fill: var (- krāsa, melns); platums: 100%; augstums: 100%;  .piemērs fons: balts svg (kvadrātiskais param (- krāsa # 00b1ff)) vāks; 

9. Lost Grid

Lost Grid ir lielisks PostCSS spraudnis, kas sniedz jums iespaidīgu CSS tīkla sistēma tas nav tikai darbojas ar vienkāršu CSS bet arī ar priekšapstrādes valodas (Sass, LESS, Stylus). Tas izmanto calc () CSS funkcija, lai izveidotu skaistus režģus, kurus var viegli izmantot, neizmantojot pārāk daudz laika ar pielāgošanu.

Lost Grid ir diezgan vienkāršs noteikums, piemēram, kolonnas ar 25% platumu definēšana neņem vairāk par šo mazo koda fragmentu:

 div Lost-column: 1/4; 

10. PostCSS sprites

The PostCSS Sprite spraudnis atvieglo ģenerē attēla sprites, t.i., attēlu kolekcijas, kas ievietotas vienā failā. Pēc dažu iespēju iestatīšanas spraudnis ņem attēlus no jūsu stilu lapas faila, apvieno tos sprītā, pēc tam atjaunina attēla atsauces, kur tas ir nepieciešams.

Varat izmantot dažādus filtrus un grupētājus, lai noteiktu, kurus attēlus vēlaties ievietot sprītā, un jūs varat arī iestatīt izejas attēla izmērus.