Share
Im vorherigen Tutorial haben wir die Verwendung des hervorragenden Vorverarbeitungspakets „PreCSS“ beschrieben. In diesem Lernprogramm gehen wir auf eine andere Art und Weise auf PostCSS-basierte Vorverarbeitung ein. Installieren Sie eine handverlesene Auswahl an Plugins, um unseren Präprozessor von Grund auf selbst zusammenzustellen.
Ich werde dich durch das Setup von was ich führen persönlich Finden Sie eine großartige Mischung aus Plugins für Spracherweiterungen. Wenn Sie jedoch Ihren eigenen Präprozessor rollen möchten, verwenden Sie möglicherweise nur einige der Plugins, die wir hier behandeln, oder Sie wählen gar keine aus, stattdessen andere Optionen.
Das ist das Schöne an diesem Prozess. Sie können Ihren Präprozessor einrichten, wie Sie möchten. In diesem Lernprogramm erfahren Sie, wie Sie einen PostCSS-Präprozessor zusammenstellen, und Sie werden mit den Funktionen der derzeit verfügbaren Plugins vertraut, damit Sie selbst entscheiden können, welches Sie verwenden möchten.
Lass uns anfangen!
Als Erstes müssen Sie Ihr Projekt so einrichten, dass es entweder Gulp oder Grunt verwendet, abhängig von Ihren Vorlieben. Wenn Sie für das eine oder andere nicht bereits eine Präferenz haben, empfehle ich die Verwendung von Gulp, da Sie weniger Code benötigen, um dieselben Ziele zu erreichen.
Wie Sie Gulp- oder Grunt-Projekte für PostCSS einrichten, erfahren Sie in den vorherigen Tutorials
beziehungsweise.
Wenn Sie Ihr Projekt jedoch nicht manuell einrichten möchten, können Sie die an dieses Tutorial angehängten Quelldateien herunterladen und entweder das bereitgestellte Gulp- oder Grunt-Starterprojekt in einen leeren Projektordner extrahieren.
Führen Sie dann den Befehl mit einer Terminal- oder Eingabeaufforderung auf den Ordner aus npm installieren.
In diesem Lernprogramm wird davon ausgegangen, dass Sie die vorherigen Einträge der Serie befolgt haben und nun wissen, wie Sie ein Plugin in Ihr Projekt installieren und es über Ihre Gulpfile oder Gruntfile laden.
Wichtig! Stellen Sie sicher, dass Sie die Plugins in der angegebenen Reihenfolge in Ihre Gulpfile / Gruntfile laden. Die Reihenfolge der Ladevorgänge ist wichtig für PostCSS, damit alles reibungslos läuft.
Der allererste Ort, an dem wir unseren benutzerdefinierten Präprozessor zusammenstellen, ist der Import. Sie haben bereits PostCSS-Inlining von gesehen @einführen Stylesheets in den vorherigen Tutorials Zur Minimierung und Optimierung sowie zur Vorverarbeitung mit PreCSS. Die Art und Weise, wie Importe in diesem Präprozessor verwendet werden, unterscheidet sich nicht.
Wir haben oben angesprochen, dass die Ladereihenfolge in PostCSS wichtig ist, und hier finden wir das erste Beispiel dafür. Wir möchten alles sicherstellen @einführen Dateien sind als allererste Inline-Datei enthalten, so dass wir den gesamten Code unseres Projekts an einer Stelle haben, für den Rest unserer Plugins.
Beispielsweise können wir alle unsere Variablen in einer Teildatei speichern und verwenden @einführen um dieses partielle in unser Haupt-Stylesheet zu bringen. Wenn wir das Plug-In nicht ausgeführt haben @einführen Dateien zuerst, unsere Variablen würden nicht importiert und stehen somit für den Rest unserer Verarbeitung nicht zur Verfügung.
Da wir nun mit dem Importieren von Partials beginnen, möchten wir unsere Gulpfile noch etwas anpassen, bevor wir unsere Importfunktionalität hinzufügen.
Hinweis: Wenn Sie Grunt verwenden, müssen Sie zu diesem Zeitpunkt keine Änderungen vornehmen.
Momentan haben wir eine ".css" -Datei, die im "src" -Ordner kompiliert wurde, aber wir möchten nicht versehentlich Teildateien kompilieren. Wir importieren alles in unsere „style.css“ -Datei, sodass nur diese kompiliert werden muss.
Finden Sie diese Zeile:
Accentsconagua
return gulp.src ('./ src / *. css')… Und ändern Sie es in:
return gulp.src ('./src/style.css')Dies ist das gleiche Plugin, das wir im Tutorial „Für Minimierung und Optimierung“ verwendet haben. Dieses Plugin wird auch in PreCSS verwendet. Daher werden Sie an diesem Punkt etwas vertraut sein.
Installieren Sie das Plugin in Ihrem Projekt. Erstellen Sie dann in Ihrem Ordner „src“ eine Datei mit dem Namen „_vars.css“ und fügen Sie etwas grundlegenden Testcode hinzu. Beachten Sie, dass wir noch keine Variablenfunktionalität hinzugefügt haben, also nur ein paar direkte CSS-Anweisungen. Beispiel:
.Test Hintergrund: Schwarz;
Importieren Sie nun Ihre neue Variablendatei in Ihre Hauptdatei "src / style.css", indem Sie diesen Code in der ersten Zeile hinzufügen:
@import "_vars";
Kompilieren Sie Ihren Code, und überprüfen Sie Ihre "dest / style.css" -Datei. Sie sollten jetzt den Code aus Ihrer "_vars.css" -Datei enthalten.
Hinweis: dieses Plugin Muss Sie werden vor den Plugins postcss-nested und postcss-simple-vars ausgeführt, die wir beide verwenden werden.
Installieren Sie postcss-mixins und fügen Sie der Datei "src / style.css" folgenden Code hinzu:
@ define-mixin-Symbol $ network, $ color .button. $ (network) hintergrundbild: url ('img / $ (network) .png'); Hintergrundfarbe: $ color; @mixin-Symbol twitter, blau;Nach der Kompilierung sollte Ihrem "dest / style.css" der folgende kompilierte Code hinzugefügt werden:
.button.twitter Hintergrundbild: URL ('img / twitter.png'); Hintergrundfarbe: blau; Das Postcss-Mixins-Plugin, das wir hier verwenden, ist das gleiche wie in PreCSS. Im PreCSS-Tutorial haben wir die Verwendung dieses Themas erläutert. Ausführliche Informationen zur Syntax finden Sie im Abschnitt „Mixins“ des vorherigen Tutorials.
Wenn Sie beim Erstellen von Mixins die Sass-Syntax vorziehen, sollten Sie sich das Postcss-Sassy-Mixins-Plugin von Andy Jansson ansehen, das auf dieselbe Weise wie Postcss-Mixins funktioniert, jedoch mit der Syntax @mixin ein mixin definieren, und @umfassen einen benutzen.
Hinweis: das Postcss-for-Plugin ist ein anderes Muss ausgeführt werden, bevor postcss-nested und postcss-simple-vars ausgeführt werden.
Installieren Sie das postcss-for-Plugin und testen Sie es dann wie erwartet, indem Sie diesen Code zu Ihrer Datei "src / style.css" hinzufügen:
@für $ i von 1 bis 3 p: nth-of-type ($ i) Rand links: calc (100% / $ i);
Es sollte kompilieren, um Ihnen Folgendes zu geben:
p: n-te des Typs (1) linker Rand: berechnet (100% / 1); p: n-te des Typs (2) linker Rand: berechnet (100% / 2); p: n-te des Typs (3) linker Rand: berechnet (100% / 3);
Wieder einmal das Plugin, das wir zum Hinzufügen verwenden @zum Schleifen sind die gleichen wie in PreCSS. Weitere Informationen zur Syntax finden Sie im Abschnitt „Schleifen“ im vorherigen Lernprogramm.
Das postcss-for-Plugin muss vor postcss-simple-vars ausgeführt werden. Das bedeutet, dass Sie keine Variablen verwenden können, um den gewünschten Bereich festzulegen @zum Schleife zum Durchlaufen.
Wenn dies ein Problem ist, können Sie stattdessen diese Verzweigung des postcss-for-Plugins verwenden, das stattdessen geladen werden soll nach dem die Postcss-Simple-Vars-Plugins.
Da es nach der Auswertung von Variablen ausgeführt wird, können Sie den von Ihnen gewünschten Bereich mit Variablen festlegen @zum Schleife zum Durchlaufen wie folgt:
@von: 1; Anzahl: 3; @für $ i von @von bis @count p: nth-of-type ($ i) Rand links: calc (100% / $ i);
Wir werden unserem Präprozessor zwei Arten von Variablen hinzufügen, die beide sehr praktisch sein können. Die erste Art verwendet eine Sass-artige Syntax, und die zweite verwendet die Syntax der benutzerdefinierten CSS-Eigenschaften, die auch als CSS-Variablen bezeichnet werden.
Installieren Sie diese beiden Plugins, dann testen wir jedes einzeln.
Zuerst testen wir die Sass-ähnliche Syntax von Postcss-Simple-Vars. Öffnen Sie die zuvor erstellte Datei „_vars.css“, löschen Sie den Inhalt und fügen Sie den folgenden Code hinzu:
$ default_padding: 1rem;
Fügen Sie der Datei "src / style.css" Folgendes hinzu und kompilieren Sie sie erneut:
.post padding: $ default_padding;
Es sollte kompilieren, um Ihnen Folgendes zu geben:
.post padding: 1rem;
Jetzt testen wir die benutzerdefinierten CSS-Eigenschaften wie die Syntax von postcss-css-Variablen. Fügen Sie der Datei "src / style.css" den folgenden Code hinzu:
: root --h1_font_size: 3rem; h1 font-size: var (- h1_font_size); @media (max-width: 75rem) h1 --h1_font_size: 4vw;
Es sollte kompilieren in:
h1 font-size: 3rem; @media (max-width: 75rem) h1 font-size: 4vw;
Beachten Sie, dass wir bei der Verwendung von CSS-Variablen nur den Wert von ändern mussten --h1_font_size Variable in der Medienabfrage und gibt automatisch die zugehörige aus Schriftgröße Eigentum. Dies ist eine besonders nützliche Funktion.
Bevor ich fortfahre, möchte ich nur kurz erwähnen, dass die Vorgehensweise in diesem Tutorial nicht die Vorgehensweise ist, die Sie verwenden haben nehmen. Wenn Sie eine Variable und nicht die andere verwenden möchten, ist das völlig in Ordnung.
Aus meiner Sicht möchte ich beide Arten von Variablen gerne verwenden, weil ich sie auf zwei verschiedene Arten benutze. Normalerweise verwende ich die CSS-Syntax für benutzerdefinierte Eigenschaften in meinem Stylesheet, während ich in meinen Teildateien Sass-ähnliche Variablen verwende.
Auf diese Weise kann ich benutzerdefinierte CSS-Eigenschaften für den Typ von Variablen festlegen, den ich tatsächlich in einem Live-Projekt verwenden könnte, wenn sie in Browsern gut unterstützt werden. Wie Sie im obigen Beispiel gesehen haben, haben sie auch bestimmte Funktionen, die Sass-ähnliche Variablen nicht haben.
In der Zwischenzeit kann ich Sass-ähnliche Variablen für Dinge verwenden, die nicht zu einem Live-Stylesheet gehören, insbesondere für solche, die nur für die Verarbeitung durch Dinge wie die einzelnen Schleifen, Bedingungen und andere Transformationen existieren.
Als Alternative zur Verwendung von Postcss-Simple-Vars sollten Sie die Verwendung von Postcss-Advanced-Variablen in Betracht ziehen, das als Teil des PreCSS-Packs verwendete Plugin.
Dies ist auch eine ausgezeichnete Option, mit dem Hauptunterschied, dass Bedingungen, Schleifen und Variablen im selben Plugin behandelt werden. Der Grund, warum ich mich für postcss-simple-vars entschieden habe, ist für mich, dass ich Konditionen lieber von einem separaten Plugin bekomme; Postcss-Conditionals, die wir in Kürze behandeln werden.
Anstatt postcss-css-variables zu verwenden, bevorzugen Sie postcss-custom-properties.
Der wesentliche Unterschied zwischen den beiden ist, dass postcss-custom-properties sich streng an die W3C-Spezifikation für benutzerdefinierte Eigenschaften anpasst, sodass Sie darauf vertrauen können, dass Sie nur korrektes zukünftiges CSS schreiben. Auf der anderen Seite bietet postcss-css-variables zusätzliche Funktionen, erhebt jedoch keinen Anspruch auf vollständige Parität mit der Spezifikation.
Ich persönlich wähle postcss-css-variables, weil ich es im Zusammenhang mit der Vorverarbeitung verwende, wo ich ohnehin viel nicht-spezifizierten Code schreibe. Als solches würde ich die zusätzliche Funktionalität lieber als 100% der Spezifikationen einhalten.
Wenn Sie jedoch Variablen im Zusammenhang mit dem Schreiben zukünftiger CSS verwenden, werden möglicherweise postcss-custom-properties für Sie besser geeignet.
Installieren Sie das Plugin "postcss-each" und fügen Sie diesen variablen Code in Ihre Datei "_vars.css" ein:
$ social: twitter, facebook, youtube;
Dieser Code definiert eine Liste, die im gespeichert ist $ sozial Variable.
Jetzt erstellen wir eine @jeder Schleife durchlaufen, um die in unserer gespeicherten Werte zu durchlaufen $ sozial Variable. Fügen Sie diesen Code zu Ihrer Datei "src / style.css" hinzu:
@each $ -Symbol in ($ social) .icon - $ (Symbol) Hintergrund: URL ('img / $ (Symbol) .png'); Unsere @jeder loop ist jetzt fertig, aber bevor wir sie kompilieren können, müssen wir die Optionen von postcss-simple-vars ein wenig ändern.
Sie werden feststellen, dass wir im obigen Code verwenden $ -Symbol Um den aktuellen Wert darzustellen, den wir durchlaufen. Einige Schwierigkeiten können sich daraus ergeben, weil das postcss-simple-vars-Plugin nach dem sucht $ unterschreiben, um Variablen zu identifizieren.
Das heißt, es wird sehen $ -Symbol, Ich denke, es ist eine Variable, versuchen Sie es zu verarbeiten und dann sehen, dass es keinen Wert hat. Dadurch wird das Kompilieren beendet und ein Fehler in der Konsole protokolliert, bei dem eine undefinierte Variable erkannt wurde.
Um dies zu beheben, möchten wir die Option hinzufügen stumm: wahr zu unseren Optionen für das Plugin. Das heißt, wenn eine undefinierte Variable entdeckt wird, wird der Kompilierungsvorgang nicht abgebrochen, um einen Fehler zu protokollieren. Er wird nur fortgesetzt. Daher wird es durch die Präsenz nicht gestört $ -Symbol in unserer @jeder Schleife und wir können erfolgreich kompilieren.
Legen Sie im Prozessor-Array Ihrer Gulpfile oder Gruntfile die Option fest:
/ * Gulpfile * / simple_vars (silent: true) / * Gruntfile * / required ('postcss-simple-vars') (silent: true)Kompilieren Sie nun Ihr CSS und Sie sollten Folgendes erhalten:
.icon-twitter Hintergrund: URL ('img / twitter.png'); .icon-facebook background: url ('img / facebook.png'); .icon-youtube background: url ('img / youtube.png'); Wie bereits erwähnt, ist postcss-advanced-variables eine weitere hervorragende Plugin-Option, die alle Variablen, Schleifen und Bedingungen in einem behandelt.
Ich habe bereits erwähnt, dass dieses Plugin meine Präferenz für den Umgang mit Bedingungen ist. Dies liegt daran, dass ich festgestellt habe, dass es in der Lage ist, komplexere bedingte Prüfungen durchzuführen. Es beinhaltet Unterstützung für @else wenn Syntax, was bedeutet, dass Sie mit einem einzigen Code mehr Bedingungen testen können.
Testen Sie das postcss-conditionals-Plugin nach der Installation, indem Sie diesen Code zu Ihrer Datei "src / style.css" hinzufügen:
$ column_count: 3; .column @if $ column_count == 3 width: 33%; Schwimmer: links; @else wenn $ column_count == 2 width: 50%; Schwimmer: links; @else width: 100%;
Dieser Code überprüft den Wert, den wir in der Variablen festgelegt haben @column_count und gibt je nach Ergebnis unterschiedliche Werte für Breite und Gleitkommazahl aus. Es funktioniert auf dieselbe Weise wie der Code, den wir im vorherigen Vorverarbeitungs-Tutorial verwendet haben, aber jetzt haben wir die Möglichkeit, sie zu verwenden @else wenn Wir konnten die Anzahl der von uns getesteten Bedingungen von zwei auf drei erhöhen.
Nach dem erneuten Kompilieren sollten Sie Folgendes erhalten:
.Spalte Breite: 33%; Schwimmer: links
Versuchen Sie es zu ändern $ column_count zu 2 oder 1 und erneut kompilieren, um zu sehen, wie die CSS-Ausgabe geändert wird.
Wir können diese Arten von Bedingungen auch in Mixins verwenden, für die wir zuvor Unterstützung hinzugefügt haben. Zum Beispiel können wir ein Mixin erstellen, um Spaltencode wie folgt zu generieren:
@ define-mixin-Spalten $ count @if $ count == 3 width: 33%; Schwimmer: links; @else wenn $ count == 2 width: 50%; Schwimmer: links; @else width: 100%; .another_column @mixin Spalten 2;
Dies gibt Ihnen die Ausgabe:
.other_column width: 50%; Schwimmer: links;
Wie bereits erwähnt, ist postcss-advanced-variables eine weitere hervorragende Plugin-Option, die alle Variablen, Schleifen und Bedingungen in einem behandelt.
In einem vorherigen Tutorial haben wir postcss-calc über cssnano verwendet, um Instanzen zu erstellen calc () effizienter nutzen. Im Zusammenhang mit der Vorverarbeitung kann es jedoch sehr nützlich sein, wo immer wir Mathematik in unseren Stylesheets verwenden möchten.
Fahren Sie fort und installieren Sie postcss-calc. Dann testen wir es, indem wir den oben hinzugefügten Mixer für die Spaltengenerierung effizienter machen.
Im Moment verwenden wir Bedingungen, um zu prüfen, ob die Mischung stimmt $ count Argument ist auf entweder gesetzt 1, 2 oder 3 dann wird eine entsprechende vorberechnete Breite ausgegeben. Stattdessen verwenden wir calc () um automatisch die richtige Breite für unseren Spaltencode auszugeben, unabhängig davon, welche Nummer durch das Mixin geleitet wird.
Fügen Sie Ihrer "src / style.css" -Datei hinzu:
@ define-mixin column_calc $ count width: calc (100% / $ count); @if $ count> 1 float: left; .column_calculated @mixin column_calc 2;
Anstatt die prozentualen Breiten, die wir für eine bestimmte Anzahl von Spalten benötigen, nicht fest zu codieren, berechnen wir sie jetzt im laufenden Betrieb.
Das Postcss-Calc-Plugin wird konvertiert Breite: berechnet (100% / $ count); in diesem Fall einen statischen Betrag abhängig vom Wert, den wir beim Aufruf des Mixins übergeben haben 2.
Kompilieren Sie Ihren Code neu und Sie sollten diese Ausgabe sehen:
.column_calculated width: 50%; Schwimmer: links;
Hinweis: Wo Postcss-Calc aufgelöst werden kann calc () zu einem statischen Wert wird es in Ihrem Code ausgegeben. Wenn dies nicht möglich ist, ändert sich nichts, sodass Sie es trotzdem verwenden können calc () für Werte, die zur Laufzeit vom Browser verarbeitet werden müssen.
Für die Verschachtelung verwenden wir dasselbe Plugin, das auch im PreCSS-Pack verwendet wird. Sie können also auf das vorherige Tutorial zurückgreifen, um vollständige Informationen zur Syntax zu erhalten.
Installieren Sie postcss-nested und testen Sie dann, ob alles ordnungsgemäß funktioniert, indem Sie diesen Code kompilieren:
.Menü Breite: 100%; eine Textdekoration: keine;
Ihr resultierendes CSS sollte sein:
.Menü Breite: 100%; .menu a Textdekoration: keine;
Für Erweiterungen verwenden wir das Plugin Postcss-sass-extend. Dadurch erhalten Sie eine andere Syntax als in unserem vorherigen Tutorial zur Arbeit mit PreCSS. Statt erweitert wird mit definiert @ define-extend extend_name … Sie sind mit definiert % extend_name ….
Sie werden immer noch mit der im Wesentlichen gleichen Syntax von verwendet @extend% extend_name;.
Beachten Sie, dass das Plugin postcss-sass-extend tatsächlich mit PreCSS ausgeliefert wird. Ich gehe jedoch davon aus, dass es standardmäßig nicht geladen wird, als ich versuchte, die erforderliche Syntax zu verwenden, die es nicht kompilierte.
Nachdem Sie postcss-sass-extend in Ihrem Projekt installiert haben, testen Sie es mit dem folgenden Code:
% round_button border-radius: 0.5rem; Polsterung: 1em; Randbreite: 0.0625rem; Bordüre: solide; .blue_button @extend% round_button; Rahmenfarbe: # 2F74D1; Hintergrundfarbe: # 3B8EFF; .red_button @extend% round_button; Rahmenfarbe: # C41A1E; Hintergrundfarbe: # FF2025;
Es sollte kompilieren in:
.blue_button, .red_button border-radius: 0.5rem; Polsterung: 1em; Randbreite: 0.0625rem; Bordüre: solide; .blue_button border-color: # 2F74D1; Hintergrundfarbe: # 3B8EFF; .red_button border-color: # C41A1E; Hintergrundfarbe: # FF2025;
Bisher haben wir uns mit den Kernmerkmalen befasst, die den meisten Preprozessoren gemeinsam sind. Es gibt jedoch noch mehr Plugins, die zusätzliche Funktionen bieten. Einige dieser Funktionen sind in anderen Präprozessoren enthalten, und einige müssen Sie bei PostCSS suchen. Wir gehen jetzt kurz auf diese zusätzlichen Optionen ein.
Die Möglichkeit, Farben anzupassen, kann eine der nützlichsten Funktionen von Präprozessoren sein. Es gibt tatsächlich mehrere Farb-Plugins für PostCSS, aber diese drei sind in einer Vorverarbeitungsumgebung besonders zu Hause. Sie ermöglichen verschiedene Farbtransformationen, einschließlich Aufhellen, Abdunkeln, Sättigen, Hinzufügen von Alpha-Werten und mehr.
Die Funktionalität dieses Plugins kann mit den nahtlosen Mixins von Stylus verglichen werden, wobei eine ähnliche Syntax verwendet wird @mixin, Sie definieren Codeabschnitte auf eine solche Weise, dass sie anschließend wie eine native Eigenschaft im Code verwendet werden können, z.
/ * Definiere eine Eigenschaft * / size: $ size height: $ size; Breite: $ size; / * Benutze es wie eine native Eigenschaft * / .square size: 50px;
Das Plugin kann auch dazu verwendet werden, native Eigenschaften Ihren Bedürfnissen entsprechend neu zu definieren.
Die Eigenschaftssuche ist eine Funktion in Stylus, die sehr praktisch sein kann. Sie können den Wert einer Eigenschaft innerhalb desselben Stils nachschlagen. Sie können beispielsweise einen rechten Rand einstellen, der mit dem linken Rand übereinstimmt: Rand links: 20px; Rand rechts: @ Rand links;
Während der regulären Verschachtelung, die wir oben beschrieben haben, werden Selektoren umbrochen. Das Plugin postcss-nested-props entpackt verschachtelte Eigenschaften, z.
/ * Originalcode * / .element border: width: 1px; Stil: solide; Farbe: #ccc; / * Nach der Verarbeitung von * / .element Rahmenbreite: 1px; Bordüre: solide; Rahmenfarbe: #ccc;
Matching gibt Ihnen eine andere Möglichkeit, bedingte Prüfungen durchzuführen, diesmal unter Verwendung von Rust-ähnlichem Pattern-Matching. Dies ähnelt Switch-Anweisungen in JavaScript oder PHP. Auf diese Weise können Sie mehrere Bedingungen effizienter prüfen als viele @ansonsten prüft.
Die Generierung von CSS-Sprites, eine beliebte Funktion in Compass, kann auch über das Postcss-Sprites-Plugin erfolgen. Das Plugin scannt Ihr CSS nach Bildern, fügt diese Bilder zu einem Sprite-Sheet zusammen und aktualisiert Ihren Code nach Bedarf, um ihn aus dem neuen Sprite-Sheet korrekt anzuzeigen.
Derzeit gibt es eine wirklich robuste Liste von Spracherweiterungs-Plugins, aus denen wir hier mehr auswählen können. Die vollständige Liste finden Sie hier: https://github.com/postcss/postcss#language-extensions
Für viele Menschen ist die Fähigkeit, in einer knappen, effizienten Syntax (normalerweise ohne Semikolons und geschweifte Klammern) zu schreiben, eine der Hauptattraktionen von Präprozessoren wie Stylus oder Sass. Die neue Version 5.0 von PostCSS unterstützt jetzt benutzerdefinierte Parser, mit denen neue Syntax unterstützt werden kann. SugarSS soll der knappe Syntax-Parser sein, und es wird derzeit diskutiert, wie diese Syntax strukturiert wird.
PostCSS ist noch relativ neu. Möglicherweise möchten Sie mit Ihrem benutzerdefinierten Präprozessor etwas erreichen, für das derzeit kein Plugin verfügbar ist. Das Schöne an diesem modularen Ökosystem ist, dass Sie die Möglichkeit haben, dieses Problem selbst zu lösen, indem Sie Ihr eigenes Plugin erstellen. Jeder kann das, und die Eintrittsbarriere ist weitaus geringer, als wenn Sie versuchen würden, Stylus, Sass oder LESS Ihre eigene Funktionalität hinzuzufügen. In einem späteren Tutorial erfahren Sie, wie das geht.
Sie müssen sich nicht zwischen PreCSS und dem Rollen Ihres eigenen Präprozessors entscheiden, wenn Sie PostCSS verwenden möchten. Sie können jeden PostCSS-basierten Preprocessing-Vorgang sogar ganz abwählen, wenn Sie dies bevorzugen. Stattdessen können Sie ihn neben Ihrem bevorzugten Präprozessor verwenden.
Im nächsten Tutorial erfahren Sie, wie Sie PostCSS in Verbindung mit Stylus, Sass oder LESS verwenden. Wir sehen uns dort!
