10 Awesome PostCSS-plugins om u een CSS-wizard te maken

PostCSS is een ongelooflijk veelzijdige tool die het mogelijk maakt om verander CSS-stijlen met JavaScript-plug-ins. De flexibiliteit ligt in de manier waarop het is gebouwd.

Het belangrijkste onderdeel van PostCSS is een Node.js-module die u kunt installeren met npm, en het heeft een ecosysteem van meer dan 200 plug-ins die u in uw project kunt gebruiken..

PostCSS is geen preprocessor, noch een postprocessor, aangezien verschillende PostCSS-plug-ins in een van deze categorieën kunnen vallen, of beide; het hangt helemaal van jou af wat je ervan maakt. Met PostCSS, u hoef niet een andere syntaxis te leren zoals in het geval van Sass of LESS; je kunt het meteen gebruiken.

PostCSS neemt uw bestaande CSS-bestand en verandert het in JavaScript-leesbare gegevens, waarna de JavaScript-plug-ins de wijzigingen uitvoeren en PostCSS de gewijzigde versie van het oorspronkelijke bestand retourneert. Klinkt cool, niet??

In deze post zullen we een kijkje nemen bij 10 PostCSS-plug-ins geeft u inzicht in enkele van de geweldige dingen die u kunt bereiken met deze geweldige tool.

1. Autoprefixer

Autoprefixer is waarschijnlijk de meest bekende PostCss-plug-in, omdat deze wordt gebruikt door opmerkelijke technologiebedrijven zoals Google, Twitter en Shopify. Het voegt voorvoegsels van leveranciers toe aan CSS-regels waar dit nodig is.

Autoprefixer gebruikt gegevens van Can I Use. Op deze manier wordt het niet gedateerd en kunnen altijd de meest recente regels worden toegepast. Je kunt kijken hoe het werkt op de interactieve demosite.

2. CSSnext

CSSnext is een CSS-transponder die kunt u toekomstige CSS-syntaxis gebruiken op de huidige sites. W3C heeft veel nieuwe CSS-regels die momenteel niet door browsers worden geïmplementeerd, maar kan ontwikkelaars in staat stellen om meer geavanceerde CSS sneller en eenvoudiger te schrijven. CSSnext is gemaakt om deze kloof te overbruggen.

Het is de moeite waard om de functies ervan te bekijken om te zien wat u ermee kunt bereiken, bijvoorbeeld als u kunt gebruik aangepaste mediaquery's, aangepaste selectors, kleurmodifiers, SVG-filters en nieuwe pseudoclasses in je ontwerpen.

3. PreCSS

PreCSS is een van de PstCSS-plug-ins die werken als een CSS-preprocessor. Het maakt het mogelijk om profiteer van een Sass-achtige opmaak in uw sytlesheet-bestanden.

Door PreCSS in uw workflow in te voeren, kunt u variabelen gebruiken, if-else statements, voor loops, mixins, @uitbreiden en @importeren regels, nesten en vele andere handige functies in uw CSS-code. De Github-documentatie van PreCSS bevat gedetailleerde instructies om er het beste van te maken.

4. StyleLint

StyleLint is een moderne CSS-linter die proefleest en valideert uw CSS-code. Het maakt het gemakkelijk om fouten te vermijden en duwt u om consistente coderingsconventies te volgen.

StyleLint begrijpt de nieuwste CSS-syntaxis, zodat deze kan worden gebruikt in combinatie met de eerder genoemde PreCSS-plug-in. U kunt er ook uw eigen configuratie mee maken en controleert zelfs of uw instellingen geldig zijn.

5. PostCSS-activa

De plug-in PostCSS Assets is handig asset manager voor uw CSS-bestanden. Het kan een goede keuze zijn als u problemen ondervindt met URL-paden, omdat PostCSS Assets uw stylesheetbestanden isoleert van wijzigingen in het milieu.

U moet belastingspaden, relatieve paden en een basispad definiëren en de plug-in zal automatisch de benodigde activa opzoeken. U kunt bijvoorbeeld de volgende code schrijven als u de juiste URL van de foobar.jpg beeld:

 body background: resolve ('foobar.jpg'); 

PostCSS-activa ook zorgt voor de cache van de assets, zoals je kunt instellen cachebuster variabele naar true als u wilt dat URL-paden automatisch worden gewijzigd in het geval dat een item wordt gewijzigd. Deze slimme plug-in berekent ook de afmetingen (breedte en hoogte) van afbeeldingsbestanden, of past ze zelfs aan met een vooraf ingestelde verhouding.

6. CSSNano

Als u geoptimaliseerde en verkleinde CSS-bestanden voor een productiesite nodig hebt, is het de moeite waard om deze eens te bekijken CSSNano. Het is een modulaire plug-in die bestaat uit veel kleinere PostCSS-plug-ins met één verantwoordelijkheid. Het voert niet alleen basis-minificatietechnieken uit, zoals het verwijderen van spaties, maar heeft ook geavanceerde opties die gerichte optimalisaties mogelijk maken.

Naast vele andere functies, is CSSNano in staat om z-indexwaarden te rebasen, aangepaste ID's te verkleinen, lengte-, tijd- en kleurwaarden om te zetten en verouderde leveranciersvoorvoegsels te verwijderen.

7. Font Magician

Als je een fan bent van verfijnde typografie, zul je zeker de Font Magician PostCSS-plug-in. De magie van Font Magician is afhankelijk van zijn mogelijkheden automatisch alle nodige genereren @ Font-face reglement.

Hoe het werkt, is vrij eenvoudig, je hoeft alleen maar het font-family: "My Fav Font"; CSS-regel naar een HTML-element en Font Magician doet de rest van het werk. Het kan Google-lettertypen, de lokale kopie van een lettertype, Bootstrap-typografie toevoegen en kan ook asynchroon lettertypen laden. Dit is de interactieve demosite.

8. Schrijf SVG

Heb je je ooit afgevraagd hoe cool het zou zijn om SVG rechtstreeks in je CSS-bestanden te schrijven? Met behulp van de Write SVG PostCSS-plug-in kunt u dit doel gemakkelijk bereiken.

Deze handige plug-in maakt het bijvoorbeeld mogelijk om sla uw SVG-achtergronden en -pictogrammen op in uw CSS-bestand, en later voeg ze toe aan het relevante HTML-element op de volgende manier:

 @svg vierkant @rect vullen: var (- kleur, zwart); breedte: 100%; hoogte: 100%;  .voorbeeld achtergrond: witte svg (vierkante param (- kleur # 00b1ff)) omslag; 

9. Verloren raster

Lost Grid is een geweldige PostCSS-plugin die je een indrukwekkend beeld geeft CSS-rastersysteem dat is niet alleen werkt met gewone CSS maar ook met preprocessortalen (Sass, LESS, Stylus). Het gebruikt de calc () CSS-functie om prachtige rasters te maken die u gemakkelijk kunt gebruiken zonder al te veel tijd te besteden aan maatwerk.

Lost Grid heeft vrij eenvoudige regels, bijvoorbeeld het definiëren van een kolom met 25% breedte vereist niet meer dan dit kleine codefragment:

 div lost-column: 1/4; 

10. PostCSS Sprites

De PostCSS Sprite plugin maakt het gemakkelijk om image sprites genereren, d.w.z. verzamelingen van afbeeldingen geplaatst in een enkel bestand. Nadat u enkele opties hebt ingesteld, haalt de plug-in de afbeeldingen uit uw stylesheet-bestand, voegt deze samen tot een sprite en werkt vervolgens de afbeeldingsreferenties bij waar dat nodig is.

U kunt verschillende filters en groupers gebruiken om te bepalen welke afbeeldingen u in de sprite wilt plaatsen en u kunt ook de afmetingen van de uitvoerafbeelding instellen.