Share
In den letzten beiden Tutorials haben wir nach Wegen gesucht, PreCSS in fertiggestellten Stylesheets zu verwenden, um deren Kompatibilität mit Browsern und deren Optimierung zu verbessern Post-Prozessor. In diesem Tutorial lernen Sie, PostCSS als Vor-Prozessor, genauso wie Sie Stylus, Sass oder LESS verwenden würden.
Es gibt zwei Möglichkeiten, wie Sie PostCSS für die Vorverarbeitung verwenden können. Zum einen können Sie alle Ihre eigenen Plugins auswählen, um die gewünschte Präprozessor-Funktionalität hinzuzufügen, und zum anderen ein Paket vorgewählter Plugins installieren, sodass Sie sofort loslegen können.
Wir beginnen mit dem schnellsten und einfachsten Ansatz und installieren das ausgezeichnete PreCSS-Plug-In-Paket, das von Jonathan Neal erstellt wurde. In diesem Tutorial fahren wir fort mit der Erstellung eines eigenen Präprozessors, wobei nur die gewünschte Funktionalität verwendet wird.
In diesem Lernprogramm wird davon ausgegangen, dass Sie mit den Funktionen von Präprozessoren (Stylus, Sass oder LESS) vertraut sind. Nur weil wir uns darauf konzentrieren werden Wie Sie können dieselben Funktionen über PostCSS anstelle von verwenden Was Die Funktionen machen es tatsächlich. Aber auch wenn Sie noch nie einen Präprozessor verwendet haben, könnte dies der perfekte Startpunkt sein.
Im nächsten Abschnitt wird beschrieben, wie Sie ein Gulp- oder Grunt-Projekt mit PreCSS einrichten. Wenn Sie jedoch eine Abkürzung machen möchten, können Sie alternativ den Live-Demo-Spielplatz verwenden, um den Code auszuprobieren Wir werden in diesem Tutorial durchlaufen. Code kann in das linke Fenster eingegeben werden. Er wird automatisch für Sie kompiliert und im rechten Fenster angezeigt.
PreCSS Live Editor: https://jonathantneal.github.io/precssAls 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 ausnpm installieren.
Installieren Sie PreCSS in Ihrem Projekt mit dem Befehl: Egal, ob Sie Gulp oder Grunt verwenden:
npm install precss --save-dev
Wenn Sie Gulp verwenden, fügen Sie diese Variable unter den bereits in der Datei vorhandenen Variablen hinzu:
Accentsconagua
var precss = requir ('precss');Fügen Sie nun den neuen Variablennamen in Ihr ein Prozessoren Array:
var Prozessoren = [precss];
Führen Sie einen kurzen Test durch, indem Sie den Befehl ausführen Schluck Css Vergewissern Sie sich, dass eine neue Datei „style.css“ im Ordner „dest“ Ihres Projekts angezeigt wurde.
Wenn Sie Grunt verwenden, aktualisieren Sie die Prozessoren Objekt, das unter dem verschachtelt ist Optionen Objekt zu Folgendem:
Prozessoren: [erfordern ('precss') ()]Führen Sie einen kurzen Test durch, indem Sie den Befehl ausführen grunzen postcss Vergewissern Sie sich, dass eine neue Datei „style.css“ im Ordner „dest“ Ihres Projekts angezeigt wurde.
Sie haben jetzt alles, was Sie zur Verwendung von PreCSS benötigen, und ist sofort einsatzbereit. Dies bedeutet, dass wir bereit sind, einige der Vorverarbeitungsfunktionen von PreCSS und deren Einsatzmöglichkeiten durchzuarbeiten.
Im Allgemeinen ist die PreCSS-Syntax der von Sass am ähnlichsten. Es verwendet jedoch einige seiner eigenen einzigartigen Ansätze, die wir im weiteren Verlauf behandeln werden.
HinweisAufgrund der Sass-ähnlichen Syntax von PreCSS werden Sie feststellen, dass ein Sass-Syntax-Highlighter in Ihrem bevorzugten Texteditor am besten für Sie geeignet ist.
Das Schachteln ist für alle drei großen Präprozessoren, d. H. Stylus, Sass und LESS, üblich, und es ist auch in PreCSS vorhanden. Die Verschachtelung in PreCSS erfolgt auf dieselbe Weise wie in Sass und LESS, indem Selektoren in den geschweiften Klammern anderer Selektoren platziert werden.
Die Fähigkeit zur Verwendung der & Das Symbol, mit dem der übergeordnete Selektor in den untergeordneten Selektor kopiert werden soll, funktioniert in PreCSS auf dieselbe Weise wie in anderen Präprozessoren.
Fügen Sie der Datei "src / style.css" den folgenden geschachtelten Code hinzu:
.Menü Breite: 100%; eine Textdekoration: keine; & :: before content: ";
Kompilieren Sie Ihr CSS mit Schluck Css oder grunzen postcss und Ihre "dest / style.css" -Datei sollte den verschachtelten Code folgendermaßen auswerten:
.Menü Breite: 100%; .menu a Textdekoration: keine; .menu :: before content: ";
Variablen sind eine andere Art von Funktionalität, die allen Präprozessoren gemeinsam ist. Sie sind in PreCSS enthalten. Das einzige, was sich in der Regel zwischen den einzelnen Präprozessoren unterscheidet, ist die Syntax zur Bezeichnung von Variablen.
@ Symbol und Ort a : vor dem Wert. $ Symbol und Platz ein = Zeichen vor dem Wert. $ Symbol und Ort a : vor dem Wert.Im Einklang mit der PreCSS-Tendenz, Sass-ähnliche Syntax zu verwenden, wird auch a gesetzt $ vor dem Variablennamen und einem : vor dem Wert.
Versuchen Sie es mit PreCSS-Variablen, indem Sie dies Ihrer Datei "src / style.css" hinzufügen:
$ text_color: # 232323; body color: $ text_color;
Nach dem erneuten Kompilieren sollten Sie den folgenden Code sehen:
Körper Farbe: # 232323;
Conditionals, d.h.. ob und sonst Logik ist eine Funktion, die sowohl bei Sass als auch bei Stylus sehr stark ist. WENIGER bietet geschützte Mixins an, aber sie bieten nicht die gleiche Leistung. Bedingungen sind in PreCSS vorhanden und folgen der gleichen Syntax wie Sass @ob und @sonst.
Fügen Sie diesen Beispielcode zu Ihrer Datei "src / style.css" hinzu:
$ column_layout: 2; .column @if $ column_layout == 2 width: 50%; Schwimmer: links; @else width: 100%;
Im obigen Beispiel haben wir eine .Säule Klassenausgabe unterschiedlich, je nachdem, ob wir ein einspaltiges Layout oder ein zweispaltiges Layout wünschen. Wir haben das $ column_layout Variable gesetzt auf 2, was wir sehen sollten Breite: 50%; Schwimmer: links; Ausgabe in unsere Klasse.
Kompilieren Sie Ihre Datei. In Ihrer Datei "dest / style.css" sollte Folgendes angezeigt werden.
.Spalte Breite: 50%; Schwimmer: links
Hinweis: Das Plug-In für postcss-advanced-variables, das diese Bedingungsfunktionen bereitstellt, ist noch recht neu. Ich habe einige unerwartete Ergebnisse erhalten, wenn es für komplexere Bedingungen verwendet wird. Ich bin jedoch sicher, dass es in naher Zukunft aktualisiert wird.
Es gibt ein alternatives Plugin, das für Bedingungen verwendet werden kann, die als Postcss-Bedingungen bezeichnet werden. Wie Sie dieses Plugin verwenden können (falls Sie sich entscheiden), wird im nächsten Lernprogramm beschrieben: „Rollen Sie Ihren eigenen Präprozessor“..
@zum und @jeder In PreCSS stehen zwei Arten von Schleifen zur Verfügung: die @zum und @jeder Schleifen Beide verwenden einen Ansatz, der genau wie Sass ist. Mit „For“ -Schleifen können Sie einen numerischen Zähler durchlaufen, während Sie mit „Jede“ -Schleife eine Liste mit Elementen aufrufen können.
@zum SchleifenIn einem @zum Schleife gibt es eine "Zähler" -Variable, die verfolgt, wo Sie sich durch Ihren numerischen Zähler bewegen, normalerweise als festgelegt $ i. Wenn Sie beispielsweise von 1 nach 3 iterieren, gibt es drei Schleifen. in der ersten $ i wird gleich sein 1, die Sekunde wird es gleich sein 2 und der dritte wird gleich sein 3.
Diese $ i Die Zählervariable kann sowohl in Selektoren als auch in Regeln interpoliert werden, was für das Generieren sehr nützlich sein kann n-te des Typs () Regeln und Breiten berechnen.
Fügen Sie diesen Code zu Ihrer "src / style.css" -Datei hinzu, um a auszuprobieren @zum Schleife:
@für $ i von 1 bis 3 p: nth-of-type ($ i) Rand links: calc (100% / $ i);
Nach der Kompilierung sollte dieser Code erweitert werden zu:
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);
Hinweis: Zahlen 1, 2 und 3 wurden in jeden der oben genannten Stile eingefügt.
@jeder SchleifenEin @jeder Schleife durchläuft eine Liste von Elementen anstelle von Zahlen. Wie bei @zum Schleifen: Die Variable, die das aktuelle Element der Schleife darstellt, kann in Selektoren und Regeln interpoliert werden. Beachten Sie, dass Sie zum Interpolieren in einen String einen Satz von Klammern in den Variablennamen im Format einfügen müssen $ (var).
Geben Sie mit PreCSS ein @jeder Schleifen Sie einen Schritt, indem Sie den folgenden Beispielcode hinzufügen:
$ social: twitter, facebook, youtube; @each $ -Symbol in ($ social) .icon - $ (Symbol) Hintergrund: URL ('img / $ (Symbol) .png'); Nach dem Kompilieren sollte folgendes CSS generiert werden:
.icon-twitter Hintergrund: URL ('img / twitter.png'); .icon-facebook background: url ('img / facebook.png'); .icon-youtube background: url ('img / youtube.png'); Die Syntax für die Mixerstellung ist ein Aspekt von PreCSS, der sich etwas von Sass unterscheidet.
In Sass verwenden Sie die Syntax, um ein Mixin zu definieren @mixin mixin_name ($ arg1, $ arg2) … und dann mit @include mixin_name (pass_arg1, pass_arg2);.
In PreCSS hingegen definieren Sie ein Mixin mit der Syntax @ define-mixin mixin_name $ arg1, $ arg2 … und benutze es mit @mixin mixin_name pass_arg1, pass_arg2;.
Fügen Sie dieses Beispiel zu Ihrer Datei "src / style.css" hinzu:
@ define-mixin-Symbol $ network, $ color .button. $ (network) hintergrundbild: url ('img / $ (network) .png'); Hintergrundfarbe: $ color; @mixin-Symbol twitter, blau; @mixin icon youtube, rot;Beim Kompilieren sollten Sie Folgendes sehen:
.button.twitter Hintergrundbild: URL ('img / twitter.png'); Hintergrundfarbe: blau; .button.youtube Hintergrundbild: URL ('img / youtube.png'); Hintergrundfarbe: rot; Hinweis: Durch das Mixin durchgeleitete Argumente können mit dem gleichen Ansatz wie in beschrieben in Selektoren und Strings interpoliert werden @jeder Schleifen oben; mit dem Format $ (var).
Neben der Verwendung von Mixins wie oben beschrieben, können sie auch so eingestellt werden, dass sie Inhaltsblöcke verbrauchen, die beim Aufruf des Mixins übergeben werden. Dies ist im Wesentlichen der gleiche Prozess wie bei Sass ' @Inhalt.
Ändern Sie beispielsweise das Mixin aus dem obigen Beispiel, platzieren @ mixin-content wo Sie möchten, dass ein übergebener Inhaltsblock wie folgt angezeigt wird:
@ define-mixin-Symbol $ network, $ color .button. $ (network) hintergrundbild: url ('img / $ (network) .png'); Hintergrundfarbe: $ color; @ Mixingehalt; Wenn ein Mixin eingebaut wird @ mixin-content verwendet wird, muss es in geschweiften Klammern stehen und nicht in einer einzelnen Zeile, die mit a endet ;, oder es wird nicht kompiliert.
Aktualisieren Sie Ihren Code, damit Ihre Mixin-Aufrufe folgendermaßen aussehen:
@mixin icon twitter, blau width: 3rem; @mixin icon youtube, rot width: 4rem;
Nach dem Kompilieren sollte dies den folgenden Code ergeben - beachten Sie die Einbeziehung von Breite Inhalt, der durch jede Verwendung des Mixins geleitet wurde:
.button.twitter Hintergrundbild: URL ('img / twitter.png'); Hintergrundfarbe: blau; Breite: 3rem; .button.youtube Hintergrundbild: URL ('img / youtube.png'); Hintergrundfarbe: rot; Breite: 4rem; Erweiterungen ähneln Mixins in gewissem Sinne, da sie so konzipiert sind, dass Sie Codeblöcke wiederverwenden können. Die Idee hinter "extend" besteht jedoch darin, einen Basissatz von Code zu erstellen, von dem Sie wissen, dass Sie ihn auf dieselbe Weise mehrmals für einen bestimmten Elementtyp verwenden werden. Sie können anschließend auf dieser Basis mit zusätzlichen, nicht standardmäßigen Code erweitern.
In PreCSS lautet die Syntax zum Definieren eines Erweiterungsbereichs @ define-extend extend_name ….
Definieren Sie in Ihrer Datei "src / style.css" eine Erweiterung, die die Basisstile für eine abgerundete Schaltfläche enthält.
@ define-extend round_button border-radius: 0.5rem; Polsterung: 1em; Randbreite: 0.0625rem; Bordüre: solide;
Dieser Standardsatz kann jetzt um zusätzlichen Code erweitert werden, z. B. durch Festlegen von Einstellungen Hintergrundfarbe und Randfarbe. Dies geschieht mithilfe der Syntax @extend extend_name; zum Importieren der in der Erweiterung definierten Basisstile.
Fügen Sie diesen Beispielcode unter dem gerade hinzugefügten Code hinzu:
.blue_button @extend round_button; Rahmenfarbe: # 2F74D1; Hintergrundfarbe: # 3B8EFF; .red_button @extend round_button; Rahmenfarbe: # C41A1E; Hintergrundfarbe: # FF2025;
Bei dem die @extend round_button; Zeile verwendet wird, wird der gesamte Inhalt der Erweiterung eingefügt.
Kompilieren Sie Ihre Stile und Sie sollten Folgendes erhalten:
.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;
Beachten Sie auch, dass die Stile der .blue_button und .roter Knopf Klasse wurden aus Gründen der Effizienz kombiniert.
Das Plugin für das Inlining von Stylesheets über @einführen ist das gleiche, das wir im vorigen Tutorial dieser Serie behandelt haben: For Minification and Optimization. Um einen Überblick über die Funktionsweise zu erhalten, lesen Sie den Abschnitt "Inline / Dateien mit @import kombinieren"..
Im Zusammenhang mit der Verwendung von PostCSS als Präprozessor werden Importe noch nützlicher, da Sie hier die Möglichkeit haben, Partials einzurichten, wie Sie es vielleicht von anderen Preprocessing-Lösungen gewohnt sind. Sie können zum Beispiel einen Ordner "partials" einrichten, Ihr Projekt in logisch getrennte Teildateien aufteilen und diese dann wie folgt importieren:
@import "partials / _variables.css"; @import "partials / _utilities.css"; @import "partials / _mixins.css"; @import "partials / _extends.css";
Ich hoffe, Sie haben jetzt ein paar Einblicke, wie leistungsfähig PostCSS mit dem PreCSS-Pack als Präprozessor sein kann. Um zusammenzufassen, was wir oben beschrieben haben:
@ define-mixin mixin_name $ arg1, $ arg2 … @mixin mixin_name pass_arg1, pass_arg2; @ mixin-content kann wie Sass verwendet werden @Inhalt @ define-extend extend_name …@extend extend_name;@einführen Inline-externe CSS-Dateien, besonders hilfreich für die Verwendung von PartialsPreCSS ist ein fantastisches Projekt, das einige hervorragende Plug-Ins für Spracherweiterungen zusammenbringt und die PostCSS-basierte Vorverarbeitung zu Plug-and-Play macht. Es bietet fast alle Funktionen, die die meisten Präprozessorbenutzer erwarten können, und bietet einen schnellen Weg, den PostCSS-Preprozessor-Ball ins Rollen zu bringen.
Die Verwendung von PreCSS ist eine der beiden Methoden der PostCSS-Vorverarbeitung, die wir zu Beginn dieses Tutorials erwähnt haben. Die andere Methode ist die Einrichtung Ihres besitzen Preprozessor: Wählen Sie von Hand die Plugins für die Spracherweiterung aus, die zu Ihren eigenen Projekten oder dem eigenen Codierungsstil passen. Der Kompromiss ist etwas mehr Setup, aber im Gegenzug haben Sie die Freiheit, einen Präprozessor zusammenzustellen, der so funktioniert, wie Sie möchten.
Wie das geht, erfahren Sie im nächsten Tutorial "Rollen Sie Ihren eigenen Präprozessor"..
