10 tolle PostCSS-Plugins, die Sie zum CSS-Assistenten machen

PostCSS ist ein unglaublich vielseitiges Werkzeug, das dies ermöglicht CSS-Stile mit JavaScript-Plugins transformieren. Seine Flexibilität liegt in der Bauweise.

Das Kernstück von PostCSS ist ein Node.js-Modul, das Sie mit npm installieren können. Es verfügt über ein Ökosystem von mehr als 200 Plugins, die Sie in Ihrem Projekt verwenden können.

PostCSS ist weder Präprozessor noch Postprozessor, da verschiedene PostCSS-Plugins in eine dieser Kategorien oder in beide fallen können. Es hängt ganz von Ihnen ab, was Sie daraus machen. Mit PostCSS können Sie Sie müssen keine andere Syntax lernen wie im Fall von Sass oder WENIGER; Sie können sofort damit beginnen.

PostCSS übernimmt Ihre vorhandene CSS-Datei und wandelt sie in JavaScript-lesbare Daten um. Die JavaScript-Plugins nehmen die Änderungen vor, und PostCSS gibt die geänderte Version der Originaldatei zurück. Klingt cool, oder??

In diesem Beitrag werfen wir einen Blick auf 10 PostCSS-Plugins geben Sie einen Einblick in einige der großen Dinge, die Sie erreichen können mit diesem fantastischen Werkzeug.

1. Autoprefixer

Autoprefixer ist wahrscheinlich das bekannteste PostCss-Plugin, da es von namhaften Tech-Unternehmen wie Google, Twitter und Shopify verwendet wird. Es fügt den CSS-Regeln Herstellerpräfixe hinzu, wenn dies erforderlich ist.

Autoprefixer verwendet Daten von Can I Use. Auf diese Weise wird es nicht veraltet und kann immer die neuesten Regeln anwenden. Sie können auf seiner interaktiven Demo-Site nachlesen, wie es funktioniert.

2. CSSnext

CSSnext ist ein CSS-Transpiler ermöglicht die Verwendung zukünftiger CSS-Syntax auf aktuellen Websites. W3C verfügt über viele neue CSS-Regeln, die derzeit nicht von Browsern implementiert werden, Entwickler jedoch die Möglichkeit haben, anspruchsvolleres CSS schneller und einfacher zu schreiben. CSSnext wurde gemacht, um diese Lücke zu schließen.

Es lohnt sich, einen Blick auf seine Funktionen zu werfen, um zu sehen, was Sie damit erreichen können, zum Beispiel Verwenden Sie benutzerdefinierte Medienabfragen, benutzerdefinierte Selektoren, Farbmodifizierer, SVG-Filter und neue Pseudoklassen in deinen Designs.

3. PreCSS

PreCSS ist eines der PstCSS-Plugins, die wie ein CSS-Präprozessor funktionieren. Es macht es möglich Nutzen Sie ein Sass-ähnliches Markup in Ihren Sytlesheet-Dateien.

Durch die Einführung von PreCSS in Ihren Workflow können Sie Variablen verwenden, ansonsten Aussagen, zum Loops, Mixins, @erweitern und @einführen Regeln, Verschachtelung und viele andere nützliche Funktionen in Ihrem CSS-Code. In der Github-Dokumentation von PreCSS finden Sie detaillierte Anweisungen, wie Sie das Beste daraus machen können.

4. StyleLint

StyleLint ist ein moderner CSS-Interpreter Korrekturlesen und validiert Ihren CSS-Code. Dadurch können Fehler leicht vermieden werden, und Sie müssen konsistente Kodierungskonventionen einhalten.

StyleLint versteht die neueste CSS-Syntax und kann daher zusammen mit dem zuvor genannten PreCSS-Plugin verwendet werden. Sie können auch Ihre eigene Konfiguration vornehmen und sogar überprüfen, ob Ihre Einstellungen gültig sind.

5. PostCSS-Vermögenswerte

Das PostCSS Assets-Plugin ist praktisch Asset Manager für Ihre CSS-Dateien. Dies kann eine gute Wahl sein, wenn Sie Probleme mit URL-Pfaden haben, da PostCSS Assets Ihre Stylesheet-Dateien von Umgebungsänderungen isoliert.

Sie müssen Ladepfade, relative Pfade und einen Basispfad definieren. Das Plugin sucht dann automatisch nach den benötigten Assets. Zum Beispiel können Sie den folgenden Code schreiben, wenn Sie die richtige URL von benötigen foobar.jpg Bild:

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

PostCSS Assets auch kümmert sich um den Cache der Assets, wie du das einstellen kannst Cachebuster Variable auf true, wenn URL-Pfade automatisch geändert werden sollen, wenn ein Asset geändert wird. Dieses intelligente Plugin berechnet auch die Abmessungen (Breite und Höhe) von Bilddateien oder ändert deren Größe sogar mit einem voreingestellten Verhältnis.

6. CSSNano

Wenn Sie für eine Produktionsstätte optimierte und minimierte CSS-Dateien benötigen, sollten Sie einen Blick darauf werfen CSSNano. Es ist ein modulares Plugin, das aus vielen kleineren PostCSS-Plugins mit eigener Verantwortung besteht. Es führt nicht nur grundlegende Minifizierungstechniken durch, z. B. das Entfernen von Whitespaces, sondern bietet auch erweiterte Optionen, die fokussierte Optimierungen ermöglichen.

Neben vielen anderen Funktionen kann CSSNano die Z-Index-Werte umbasieren, benutzerdefinierte Bezeichner reduzieren, Längen-, Zeit- und Farbwerte konvertieren und veraltete Herstellerpräfixe entfernen.

7. Magier der Schrift

Wenn Sie ein Fan von ausgefeilter Typografie sind, wird Ihnen das sicherlich gefallen Schriftzauberer PostCSS-Plugin. Die Magie von Font Magician beruht auf seiner Fähigkeit von automatisch alle notwendigen generierungen @Schriftart Regeln.

Wie es funktioniert, ist ziemlich unkompliziert, Sie müssen nur das hinzufügen Schriftfamilie: "My Fav Font"; CSS-Regel zu einem HTML-Element, und Font Magician erledigt den Rest der Arbeit. Es kann Google Fonts hinzufügen, die lokale Kopie einer Schriftart, die Bootstrap-Typografie, und die Schriftarten können auch asynchron geladen werden. Hier ist seine interaktive Demo-Site.

8. Schreiben Sie SVG

Haben Sie sich jemals gefragt, wie cool es wäre, SVG direkt in Ihre CSS-Dateien zu schreiben? Mit Hilfe des Write SVG PostCSS Plugins können Sie dieses Ziel leicht erreichen.

Dieses praktische Plugin macht es zum Beispiel möglich Speichern Sie Ihre SVG-Hintergründe und -Symbole in Ihrer CSS-Datei, und später Fügen Sie sie dem entsprechenden HTML-Element hinzu auf die folgende Weise:

 @svg square @rect fill: var (- Farbe, schwarz); Breite: 100%; Höhe: 100%;  .example background: white svg (quadratisches param (- color # 00b1ff)) cover; 

9. Verlorenes Gitter

Verlorenes Gitter ist ein großartiges PostCSS-Plugin, das Sie mit einem beeindruckenden Eindruck macht CSS-Rastersystem das geht nicht nur arbeitet mit einfachem CSS aber auch mit Präprozessorsprachen (Sass, WENIGER, Stylus). Es verwendet die calc () CSS-Funktion zum Erstellen schöner Raster, die Sie problemlos verwenden können, ohne zu viel Zeit für die Anpassung aufwenden zu müssen.

Für Lost Grid gibt es ziemlich einfache Regeln. Zum Beispiel erfordert das Definieren einer Spalte mit 25% Breite nicht mehr als diesen kleinen Code-Snippet:

 div verlorene Spalte: 1/4; 

10. PostCSS-Sprites

Das PostCSS Sprite Plugin macht es einfach zu Bildsprites erzeugen, d. h. Sammlungen von Bildern, die in einer einzelnen Datei angeordnet sind. Nachdem Sie einige Optionen festgelegt haben, entnimmt das Plugin die Bilder aus Ihrer Stylesheet-Datei, fügt sie in einem Sprite zusammen und aktualisiert die Bildreferenzen, wo immer dies erforderlich ist.

Sie können verschiedene Filter und Gruppierungen verwenden, um zu bestimmen, welche Bilder in das Sprite eingefügt werden sollen. Außerdem können Sie die Abmessungen des Ausgabebilds festlegen.