Share
Wie Sie aus den vorherigen Einträgen dieser Serie entnehmen können, dreht sich bei PostCSS alles um die Plugins. Die von Ihnen ausgewählten Plugins definieren Ihre Erfahrungen mit PostCSS vollständig.
Angesichts der Tatsache, dass sie so grundlegend und grundlegend sind, werden wir vor der eigentlichen Produktion von Stylesheets über PostCSS einen Blick darauf werfen, wie Sie das PostCSS-Plugin-Ökosystem erkunden können. Auf diese Weise erhalten Sie auch einen Überblick darüber, wie leistungsfähig PostCSS ist und wie es Funktionen bietet, die nicht mit anderen Mitteln gleichermaßen erstellt werden können.
Wir zeigen Ihnen, wo Sie die neuesten und besten Plugins nachverfolgen können, die Kategorien, in die diese Plugins normalerweise fallen, und Überlegungen, wie Sie all diese Plugins auf logische Weise in Projekte laden können.
Wenn Sie mit PostCSS arbeiten, gibt es drei Orte, an denen Sie ein Auge auf die Suche nach großartigen Plugins haben sollten.
Die Hauptseite des PostCSS Github-Repos enthält derzeit eine umfassende kategorisierte Liste von Plugins. Diese Liste wird in der Regel regelmäßig aktualisiert, so dass es ein zuverlässiger Ort ist, um zu sehen, welche Plugins für verschiedene Aspekte der Entwicklung verfügbar sind.
https://github.com/postcss/postcss#pluginsEine relativ neue und sehr willkommene Ergänzung der PostCSS-Welt ist die Website postcss.parts, die einen durchsuchbaren Katalog von PostCSS-Plugins bereitstellt.
http://postcss.partsPostCSS veröffentlicht gerade neue und interessante Plugins, die regelmäßig veröffentlicht werden. An den beiden oben genannten Stellen werden keine neuen Plugins hervorgehoben, so dass Sie auf einen Blick nicht wissen, ob Elemente vorhanden sind, die Sie noch nicht gesehen haben. Aus diesem Grund ist es eine großartige Idee, @PostCSS auf Twitter zu besuchen oder regelmäßig zu besuchen.
https://twitter.com/postcssDie Funktionsvielfalt von Plugins, die mit PostCSS zusammenarbeiten können, ist riesig. Daher ist es eine gute Idee, eine Einführung in das Allgemeine zu haben Typen von Plugins, denen Sie wahrscheinlich begegnen werden, bevor Sie eines von ihnen ausprobieren.
Der grundlegende Charakter von PostCSS besteht darin, dass es eine modulare CSS-Verarbeitung bietet. Daher wird empfohlen, dass einzelne Plugins nur einen kleinen, eng definierten Funktionsumfang abdecken. Megalithische Multifunktions-Plugins, die alles auf einmal erledigen, werden nicht empfohlen.
Manchmal möchten Sie jedoch eine lange Liste von Funktionen in ein Projekt integrieren, und Sie müssen nicht zwanzig verschiedene Plugins einzeln installieren und konfigurieren. Hier kommen „Packs“ ins Spiel. Packs vereinen mehrere modulare Plugins unter einem thematischen Dach, sodass sie alle gleichzeitig installiert und eingesetzt werden können.
Das PreCSS-Paket kombiniert beispielsweise neun separate PostCSS-Plugins, um eine Sass-ähnliche Funktionalität zu erstellen. Das cssnano-Paket verwendet etwa 20 PostCSS-Plugins, um die CSS-Minifizierung und -Optimierung zu ermöglichen. Durch die Verwendung dieser Pakete sparen Sie sich die Notwendigkeit, jedes Plugin manuell zu installieren und zu laden.
In Zukunft geht es bei CSS nur darum, dass Sie eine Syntax schreiben, von der wir wissen, dass sie in der W3C-Spezifikation auftaucht, aber in Browsern möglicherweise noch nicht vollständig unterstützt wird.
Beispielsweise möchten Sie möglicherweise die nächste acht- oder vierstellige Hexadezimalschreibweise verwenden, um deckende Farben zu erstellen. Um ein leicht transparentes Blau zu erzeugen, können Sie einen Farbcode wie verwenden # 0000ffcc, oder seine abgekürzte Form # 00fc, Führen Sie das Postcss-Color-Hex-Alpha-Plugin aus, um dieses in das allgemein unterstützte Format zu konvertieren rgba (0, 0, 100%, 0,8).
Die prominenteste Präsenz im PostCSS-Future-CSS ist das cssnext-Paket, das eine große Menge an spec-kompatiblem zukünftigem CSS auf den Tisch bringt. Derzeit entwickelt sein Entwickler Maxime Therouin den Pack jedoch durch eine grundlegende Umstellung seiner Funktionsweise. Daher halten wir uns daran, Ihnen ein zukünftiges CSS-Lernprogramm zur Verfügung zu stellen, bis der Übergang abgeschlossen ist.
Wenn es bei CSS in der Zukunft darum geht, den Code von morgen in den heutigen Browsern funktionieren zu lassen, geht es bei Fallbacks im Wesentlichen darum, den heutigen Code in den Browsern von gestern funktionieren zu lassen. In einer perfekten Welt müssten wir niemals über alte und veraltete Browser nachdenken, aber in Wirklichkeit gibt es noch einige Projekte, für die die Unterstützung von älteren Browsern unerlässlich ist. Die Fallback-Kategorie der PostCSS-Plugins kann helfen, wo dies der Fall ist.
Alle diese Plugins laufen freihändig, wobei Sie meinen Code gemäß den aktuellen Standards schreiben, und die Plugins finden Code, der ältere Fallbacks benötigt, und fügen diesen bei Bedarf automatisch ein.
Sie können z. B. flache Farben als Fallbacks hinzufügen rgba () Farben durch das postcss-color-rgba-Plugin, oder fügen Sie IE8-kompatible Fallbacks hinzu Opazität über das Postcss-Opacity-Plugin. Das bekannteste dieser Plugins ist Autoprefixer, das je nach Bedarf Herstellerpräfixe hinzufügt, die auf Daten von CanIUse.com basieren.
Weitere Informationen zu Fallback-Plugins finden Sie im nächsten Tutorial für die Cross-Browser-Kompatibilität dieser Serie.
Spracherweiterungs-Plugins fügen CSS Funktionen hinzu, die ansonsten nicht vorhanden wären. Zum Vergleich: Sie können die meisten Präprozessoren als vollständig aus Spracherweiterungen betrachten. In der Tat werden sich Benutzer von Sass, Stylus und LESS wahrscheinlich mit vielen PostCSS-Spracherweiterungen wie zu Hause fühlen, die Mixins, Variablen, Bedingungen, Schleifen, Verschachteln, Erweitern usw. hinzufügen.
Da PostCSS jedoch vollkommen flexibel ist, gibt es auch Spracherweiterungen, die Funktionen bieten, die in Preprozessoren nicht üblich sind. Das postcss-bem-Plugin fügt beispielsweise eine Syntax hinzu, die speziell für die Erstellung von CSS gemäß der BEM / SUIT-Methodologie verwendet wird (mehr dazu in einem späteren Lernprogramm). Mit dem Plugin postcss-define-property können Sie Ihre eigenen benutzerdefinierten Eigenschaften erstellen oder native Eigenschaften neu definieren. Mit dem Postcss-Match-Plugin können Sie nicht nur Bedingungen, sondern auch Musterlogik in Ihrem Code verwenden.
Bei dieser Vielfalt sind alle Anzeichen dafür, dass PostCSS so weit ausgereift ist, dass es einen Großteil der Funktionalität bereitstellt, die viele von uns in Vorprozessoren suchen, aber darüber hinaus auch eine erhebliche Funktionalität.
Viele der derzeit für PostCSS verfügbaren Farb-Plugins beschäftigen sich mit der Umwandlung von Farben von einem Format in ein anderes, beispielsweise von # hex.a zu rgba (), hcl (H, C, L) zu #rgb, oder pantone zu #rgb. Darüber hinaus übernehmen einige der nützlichsten Plugins die Farbmanipulation, z. B. das Mischen von zwei Farben oder das Skalieren der Helligkeit oder Dunkelheit.
Bei einem meiner Favoriten können Sie Ihr vorhandenes Farbschema verwenden und dann eine Version ausgeben, wie sie Personen mit bestimmten Formen der Farbenblindheit erscheinen würde. Es gibt nichts Besseres als etwas aus erster Hand zu erfahren, um festzustellen, wie zugänglich Ihre Designs sind.
In den späteren Tutorials zu Preprocessing, Shorthand und "Verschiedene Goodies" werden wir ausführlicher auf Farb-Plugins eingehen.
Diese Kategorie von Plugins erledigt viele Optimierungsaufgaben, z. B. das Packen von Base64-Daten, das Generieren von CSS-Sprite-Sheets und die SVG-Optimierung. Außerdem finden Sie verschiedene andere Arten von Bild- und Schriftart-Tools, wie z. B. die automatische Umwandlung von SVG in PNG für IE8, die automatische Erstellung von WebP-Bildern und die Einbindung in unterstützende Browser, @Schriftart Verknüpfungen, Retina-Unterstützung Verknüpfungen und mehr.
Als ich herausfand, dass Rastersysteme in PostCSS geschrieben werden konnten, ohne dass vorab geschriebene Stylesheets geladen oder Pre-Prozessor-Mixins verwendet werden mussten, öffnete ich als erstes das Augenmerk auf der Leistungsfähigkeit von PostCSS. Ich hatte früher gedacht, dass es bei PostCSS hauptsächlich darum ging, vorhandenes CSS zu filtern und zu modifizieren. Allerdings zeigen Rastersysteme, dass damit ganze Bibliotheken externer Stile erstellt werden können.
Für PostCSS stehen derzeit drei Netzsysteme zur Verfügung:
PostCSS-Optimierungsplugins lassen sich in zwei allgemeine Kategorien einteilen: Minifizierung und Codeänderung. Durch diese Plugins können Sie Minifizierungsaufgaben wie das Entfernen von Leerzeichen und Kommentaren ausführen. Außerdem können Sie komplexere Modifikationen ausführen, z. B. das Kombinieren von passenden Medienabfragen und das Inlining @einführen Stylesheets, Optimierung der Schriftgewichtungen, Entfernen von leeren oder doppelten Regeln usw..
Weitere Informationen zu dieser Kategorie von PostCSS-Plugins finden Sie im nächsten Tutorial "Für Minification and Optimization".
Als Präprozessorbenutzer fand ich immer einen der größten Vorteile darin, dass ich die Menge an Code reduzieren konnte, den ich mithilfe von Variablen und Mixins schreiben musste. Durch PostCSS habe ich noch umfangreichere Möglichkeiten entdeckt, das Schreiben von Code durch die lange Liste der verfügbaren Shortcut- und Shorthand-Plugins effizienter zu gestalten.
Sie können die Abkürzung für Eigenschaften verwenden, z. B. entweder Ihre eigene definieren oder eine vorhandene Abkürzung verwenden w anstatt Breite, h anstatt Höhe und so weiter. Sie können ausgeben @Schriftart Code, verwandeln Code, Dreiecke und Kreise jeweils in einer Zeile. Sie können alle gängigen Aufgaben abkürzen, z. B. Verknüpfungsstil, Zentrieren, Löschen, Positionieren, Größenanpassung, Abstand und Ausgabe von Farbcodes.
Wir werden auf diese Plugins im Tutorial "Shortcuts and Shorthand" näher eingehen.
PostCSS kann auch für mehr als nur für die Transformation von CSS verwendet werden. Es kann auch verwendet werden, um Feedback zu geben, während Sie Ihr CSS entwickeln. Zu den verfügbaren Analyse- und Berichterstellungs-Plugins gehören ein Linter für BEM / SUIT-Code, ein Plugin für eine Aufschlüsselung Ihres Codes über CSSstats, "DoIUse", um Ihnen mitzuteilen, wie Ihr Code mit den Daten von Can I Use übereinstimmt, und ein Modernizr-Dateigenerator.
Es gibt einige großartige PostCSS-Plugins, die nicht ganz in eine bestimmte Kategorie passen, aber viel zu schade sind. Wir haben zum Beispiel einen Postcss-Style-Guide, der automatisch einen Style-Guide basierend auf Ihrem CSS generiert. Es gibt auch das rtlcss-Plugin, das von WordPress verwendet wird und eine rechts-links-Version Ihres Stylesheets generiert.
Einige dieser großartigen Plugins werden im Tutorial "Miscellaneous Goodies" behandelt..
In der Kategorie „Spaß“ sind Edelsteine wie das Postcss-Spiffing enthalten, mit dem Sie beispielsweise die Rechtschreibung in Großbritannien verwenden können Farbe anstatt Farbe, und gut artige Syntax wie !Bitte anstatt !wichtig.
Es ist unwahrscheinlich, dass Plugins dieser Kategorie in einem echten Projekt verwendet werden. Ein echter Vorteil ist jedoch, dass sie als leicht verständliche Beispiele für angehende Plugin-Entwickler dienen. Sie sind recht einfach und kurz und eignen sich daher hervorragend, um einen Blick in das Innere der PostCSS-Plugins zu werfen.
Eine der wichtigsten Überlegungen, die Sie beim Laden des Arrays von PostCSS-Plugins beachten müssen, ist die Reihenfolge, in der Sie sie ausführen. Sie müssen anhalten und Ihre Liste durchdenken, um zu bestimmen, ob ein Plugin nach dem anderen laufen muss, um das zu tun, was Sie möchten.
Beispielsweise können Sie ein Plugin wie postcss-simple-vars verwenden, das die Unterstützung für Variablen hinzufügt, und Sie können es zum Speichern von verwenden rgba () Wert wie folgt:
/ * source code * / $ color: rgba (0, 0, 0, 0,5); .style background: $ color; / * kompiliert zu: * / .style background: rgba (0, 0, 0, 0,5);
Sie können auch ein Plugin wie postcss-color-rgba-fallback verwenden, um einen flachen Hexcode als Fallback hinzuzufügen.
/ * kompiliert zu: * / .style background: # 000; Hintergrund: rgba (0, 0, 0, 0,5);
In diesem Fall müssen Sie sicherstellen, dass Sie das Variablen-Plugin ausgeführt haben Vor das Fallback-Plugin.
Wenn Sie das Fallback-Plugin zuerst ausgeführt haben, wird es nur gefunden Hintergrund: $ Farbe; In Ihrem CSS und nicht wissen, gab es ein rgba () Wert für die Arbeit mit.
Wenn Sie jedoch zunächst das Variablen-Plugin ausführen, wird es bei der Ausführung des Fallback-Plugins gefunden Hintergrund: rgba (0, 0, 0, 0,5); und machen Sie weiter und fügen Sie den erforderlichen Fallback hinzu.
Die Ladereihenfolge für Plugins ändert sich mit jedem Satz von Plugins. Es kann also sein, dass Sie manchmal ein wenig experimentieren müssen, damit alles gut zusammenarbeitet.
Um die PostCSS-Plugins kennenzulernen:
Wir haben unsere Kurzanleitung zu PostCSS fertiggestellt und können sofort in die Praxis einsteigen und mit der Erstellung von aktuellem CSS-Code beginnen.
Im nächsten Tutorial beginnen wir mit der Verwendung von PostCSS zum Generieren von Browser-kompatiblem Code durch automatisches Einfügen von Herstellerpräfixen und einer Reihe von Fallbacks für Eigenschaften mit älteren Browsern, insbesondere IE8.
Wir sehen uns im nächsten Tutorial!
Accentsconagua