Share
Wenn Sie sich für PostCSS interessieren, Ihren Lieblings-Präprozessor aber trotzdem lieben, machen Sie sich keine Sorgen. Sie müssen sich nicht zwischen den beiden entscheiden - Sie können sie direkt nebeneinander verwenden.
Es gibt verschiedene PostCSS-Plug-Ins, die den Präprozessor sehr gut ergänzen, da sie Ihrem Workflow Funktionen hinzufügen, die sonst nur mit einem Präprozessor unmöglich oder zumindest schwieriger wären.
Wir werden auf einige dieser kostenlosen Plugins eingehen, dann gehen wir durch die Installationsanleitungen, um Ihnen zu zeigen, wie Sie PostCSS neben Sass, Stylus oder LESS verwenden.
Bevor wir einsteigen Wie Sie können Preprozessoren zusammen mit PostCSS verwenden, wir sprechen ein wenig darüber Warum du würdest wollen Die kurze Antwort lautet: Zugang zu PostCSS-Plugins erhalten, deren Funktionalität Präprozessoren ergänzt. Um Ihnen zu zeigen, warum es sich lohnt zu zeigen, gehen wir eine Handvoll Plugins durch, die mit Vorprozessoren wirklich gut funktionieren.
Hinweis: Es kann möglich sein, ähnliche Ergebnisse durch Verwendung von Mixins und Funktionen im regulären Preprozessor-Code zu erzielen. Bei jedem der folgenden Beispiele wird der Prozess jedoch automatisch ausgeführt. Sie schreiben Ihr CSS normal und die Plugins erledigen alles für Sie, ohne aufzurufende Funktionen, keine einzuschließenden Mixins oder Argumente.
Es wurde schon oft ein Präprozessor-Mix für das Einfügen von Herstellerpräfixen geschrieben. Beispielsweise haben Sie verwendet @Einschließen der Boxgröße (Randbox); von der Compass-Bibliothek zum Ausgabeanbieter vorangestellt Box-Sizing Regeln.
Das Problem, sich auf Mixins für Herstellerpräfixe zu verlassen, ist:
Accentsconagua
Box-Sizing viel zu lange…)Autoprefixer beseitigt diese Bedenken, indem der Herstellerpräfix automatisch abläuft. Autoprefixer durchsucht Ihr CSS, vergleicht es mit den Daten von CanIUse.com und fügt dann die erforderlichen Präfixe hinzu.
Weitere Informationen zu Autoprefixer finden Sie unter: https://github.com/postcss/autoprefixer
Das Generieren von Standard- und RTL-Stylesheets (von rechts nach links) aus einer einzigen Quelle wurde ebenfalls mit Vorprozessoren durchgeführt. In der Regel müssen jedoch an mehreren Stellen mehrere Mixins und / oder Interpolationsvariablen in Ihren Code eingefügt werden. Zum Beispiel anstatt zu schreiben Rand links: 1rem; Möglicherweise müssen Sie schreiben margin - # dir: 1rem; oder @inklude margin-left (1rem);.
Mit dem rtlcss-Plugin von Mohammad Younes müssen Sie jedoch keine Mixins oder Variableninterpolation verwenden. Sie schreiben Ihr Stylesheet wie gewohnt, und das Plugin findet alle Instanzen oder "rechts" oder "links" und tauscht sie aus. So Rand links: 1rem; wird automatisch Rand rechts: 1rem; ohne dass Sie dafür einen speziellen Code schreiben müssen.
Weitere Informationen zu RTLCSS finden Sie unter: https://github.com/MohammadYounes/rtlcss
Mit dem postcss-colorblind-Plugin von Brian Holt können Sie automatisch verschiedene Versionen Ihres Stylesheets generieren, mit denen Sie hautnah erleben können, wie Ihr Design einer Person mit Farbblindheit aussehen würde. Es können acht verschiedene Arten von Farbenblindheit simuliert werden, sodass Sie wirklich genau wissen, wie gut Ihre Farbschemata sind.
Dies ist ein Beispiel für Funktionen, die Sie wirklich zu PostCSS suchen müssen, da dies für Preprozessoren sehr schwer zu erreichen wäre.
Weitere Informationen zu postcss-colorblind finden Sie unter: https://github.com/btholt/postcss-colorblind
Mit dem postcss-svgo-Plugin von Ben Briggs können Sie den Inline-SVG-Code freihändig optimieren. Zum Beispiel das:
Hintergrund: URL ('data: image / svg + xml; utf-8,');Kann bis auf diesen Wert reduziert werden, weniger als die Hälfte des Codes:
Hintergrund: URL ('data: image / svg + xml; utf-8,');Weitere Informationen zu postcss-svgo finden Sie unter: https://github.com/ben-eb/postcss-svgo
Während Präprozessoren Leerzeichen und Kommentare entfernen können, kann das cssnano-Pack von Ben Briggs alle Arten von Optimierungen über diese beiden Schritte hinaus durchführen. Wir behandeln cssnano ausführlich im Tutorial für Minification and Optimization.
Weitere Informationen zu cssnano finden Sie unter: https://github.com/ben-eb/cssnano
Das Postcss-Font-Magician-Plugin von Jonathan Neal macht das Hinzufügen von benutzerdefinierten Schriftarten so einfach wie das Verwenden normaler Schriftarten. Sie brauchen keine Mixins zu verwenden, fügen Sie einfach ein Schriftfamilie Regel wie üblich:
body Schriftfamilie: "Alice";
… Und das Plugin wird voll auskommen @Schriftart Generation für Sie:
@ font-face font-family: "Alice"; font-style: normal; Schriftgewicht: 400; src: lokal ("Alice"), lokal ("Alice-Regular"), URL ("http://fonts.gstatic.com/s/alice/v7/sZyKh5NKrCk1xkCk_F1S8A.eot?#") Format ("eot") , url ("http://fonts.gstatic.com/s/alice/v7/l5RFQT5MQiajQkFxjDLySg.woff2") - Format ("woff2"), url ("http://fonts.gstatic.com/s/alice/v7) /_H4kMcdhHr0B8RDaQcqpTA.woff ") format (" woff "), url (" http://fonts.gstatic.com/s/alice/v7/acf9XsUhgp1k2j79ATk2cw.ttf ") format (" truetype ") "Alice"; Weitere Informationen zu postcss-font-magician finden Sie unter: https://github.com/jonathantneal/postcss-font-magician
Nachfolgend finden Sie sechs Installationsanleitungen: eine Gulp- und Grunt-Anleitung für jeden großen Präprozessor. Sie müssen nicht alle sechs Punkte lesen. Sie können direkt zum Leitfaden Ihres bevorzugten Präprozessors und Build-Tools springen. Wenn Sie nicht sicher sind, ob Sie Gulp oder Grunt verwenden möchten, ist Gulp definitiv die einfachere Wahl für dieses Tutorial.
Für welchen Leitfaden Sie auch immer folgen, Sie müssen mit einem leeren Gulp- oder Grunt-Projekt beginnen. 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.
Nachdem Sie ein leeres Projekt für einen der folgenden Abschnitte eingerichtet haben, müssen Sie auch zwei PostCSS-Plugins installieren: Autoprefixer und cssnano. Sie können dies tun, indem Sie den Befehl ausführen:
npm install autoprefixer cssnano --save-dev
Wir werden diese beiden Plugins verwenden, um zu testen, dass PostCSS und Ihr Präprozessor wie erwartet zusammenarbeiten.
Die erste Regel bei der Verwendung eines Präprozessors mit PostCSS lautet, dass Sie diesen Präprozessor immer ausführen sollten zuerst. Dies liegt daran, dass Sie keine präprozessor-spezifische Syntax in Ihrem Code haben möchten, die ein PostCSS-Plugin verschlucken könnte, und dass PostCSS auch keine Änderungen am Code vornehmen soll, die die Ausführung eines Präprozessors verhindern könnten.
Für jeden von uns eingerichteten Präprozessor führen wir Autoprefixer und cssnano aus, nachdem der Präprozessor seine Kompilierung abgeschlossen hat. In jedem Fall müssen wir Testcode hinzufügen, damit diese beiden Plugins funktionieren können.
Um zu speichern, dass derselbe Code in jedem Abschnitt unten wiederholt wird, fügen Sie diesen in die Preprozessor-Quelldatei ein, an der Sie gerade arbeiten, wenn Sie eine Anweisung erhalten, Ihren PostCSS-Testcode hinzuzufügen:
.css_nano, .css_nano + p, [class * = "css_nano"], .css_nano / * cssnano entfernt diesen Kommentar * / display: flex; Schriftgewicht: normal; Rand oben: 1rem; Rand unten: 2rem; Rand links: 1.5rem; Rand rechts: 2.5rem; Schriftgewicht: normal; Polsterung: 1,75rem; Breite: berechnet (50rem - (2 * 1,75rem));
Bei Erfolg wird der kompilierte Code jeweils wie folgt ausgegeben:
.css_nano, .css_nano + p, [class * = css_nano] Anzeige: -webkit-box; Anzeige: -webkit-flex; Anzeige: -ms-flexbox; Anzeige: flex; Rand: 1rem 2.5rem 2rem 1.5rem; font- Gewicht: 400; Polsterung: 1,75Rem; Breite: 46,5Rem
Hinweis: Die Verwendung von Flexbox wurde automatisch korrigiert, und cssnano hat den Code mehrfach optimiert. Wir verwenden den gleichen Code zum Testen von cssnano wie im vorherigen Tutorial zur Minimierung und Optimierung. Informationen zu den durchgeführten Optimierungen finden Sie im Abschnitt "cssnano".
Da Sie bereits mit Node.js arbeiten, um Gulp oder Grunt und PostCSS auszuführen, ist es am einfachsten, Sass neben ihnen zu verwenden, indem Sie es über LibSass ausführen. Dies ist auch wesentlich schneller als Ruby Sass. Wir werden LibSass über die Module gulp-sass oder grunt-contrib-sass einsetzen.
Installieren Sie das gulp-sass-Modul mit in Ihr Projekt npm install gulp-sass --save-dev.
Jetzt können Sie Ihre Gulpfile folgendermaßen aktualisieren:
var gulp = required ('gulp'); var postcss = required ('gulp-postcss'); var sass = erfordern ('gulp-sass'); var autoprefixer = required ('autoprefixer'); var cssnano = erfordern ('cssnano'); gulp.task ('css', function () var processingors = [autoprefixer, cssnano]); gulp.src ('./src / *. scss') .pipe (sass (). on ('error', sass.) zurückgeben .logError)) .pipe (postcss (Prozessoren)) .pipe (gulp.dest ('./ dest')););Brechen wir auf, was wir vom Standard-Starter Gulpfile geändert haben:
Schluck-Sass, Autoprefixer und Cssnano Autoprefixer und Cssnano Variablen zum Prozessoren ArrayRohr() Linie, .Pfeife (sass ()… , Um das Sass zu verarbeiten, stellen Sie sicher, dass es vor der Zeile steht, die PostCSS verarbeitetJetzt können wir einige Tests ausführen, um sicherzustellen, dass sowohl Sass als auch PostCSS wie erwartet kompilieren.
Benennen Sie Ihre vorhandene Datei "src / style.css" in "src / style.scss" um und fügen Sie den folgenden Testcode hinzu:
$ font-stack: Helvetica, serifenlos; $ primary-color: # 333; body font: 100% $ font-stack; Farbe: $ Primärfarbe;
Lauf Schluck Css und Sie sollten eine neue "style.css" -Datei im Ordner "dest" mit dem Inhalt sehen:
body font: 100% Helvetica, serifenlos; Farbe: # 333;
Fügen Sie nun den zuvor in diesem Lernprogramm bereitgestellten PostCSS-Testcode zu Ihrer Datei "style.scss" hinzu.
Führen Sie Ihre Schluck Css Befehl und Sie sollten den richtigen Code in Ihrer Datei "dest / style.css" sehen:
body font: 100% Helvetica, serifenlos; Farbe: # 333 .css_nano, .css_nano + p, [class * = css_nano] display: -webkit-box; display: -webkit-flex; display: -ms -flexbox; Anzeige: flex; Rand: 1rem 2.5rem 2rem 1.5rem; Schriftgewicht: 400; Auffüllung: 1.75rem; Breite: 46.5rem
Installieren Sie in Ihrem neuen Grunt-Projekt das Grunt-Contrib-Sass-Modul mit npm install grunt-contrib-sass.
Dann fügen Sie ein grunt.loadNpmTasks () Funktion dafür unter der bestehenden, die Sie für PostCSS haben:
grunt.loadNpmTasks ('grunt-postcss'); grunt.loadNpmTasks ('grunt-contrib-sass');Sie müssen jetzt eine neue Aufgabe für die Verarbeitung von Sass einrichten. Nach dieser Zeile:
grunt.initConfig (
… Aber vor dem Bestehenden postcss Aufgabe, fügen Sie diesen Code hinzu:
sass: dist: files: 'src / style.css': 'src / style.scss',
Jetzt registrieren wir eine Aufgabe, die Sass und dann PostCSS ausführen wird. Nach dem grunt.loadNpmTasks () Funktion, die Sie gerade eingefügt haben, fügen Sie hinzu:
grunt.registerTask ('css', ['sass', 'postcss']);Um Ihre Installation zu testen, benennen Sie Ihre vorhandene Datei "src / style.css" in "style.scss" um. Fügen Sie diesen Sass-Code hinzu:
$ font-stack: Helvetica, serifenlos; $ primary-color: # 333; body font: 100% $ font-stack; Farbe: $ Primärfarbe;
Führen Sie den Befehl aus grunzen css Sie sollten eine neue Datei mit dem Namen "style.css" in Ihrem "dest" -Ordner sehen, die folgenden Code enthält:
body font: 100% Helvetica, serifenlos; Farbe: # 333;
Wir werden nun unsere Autoprefixer- und Cssnano-Plugins zum Laufen bringen. Aktualisieren Sie Ihre Gruntfile Prozessoren Array zu Folgendem:
Prozessoren: [Require ('Autoprefixer') (), Required ('cssnano') ()]Fügen Sie der "style.scss" -Datei den PostCSS-Testcode hinzu, und führen Sie den Befehl aus grunzen css wieder und Sie sollten finden, dass Ihre neu kompilierte Datei „dest / style.css“ jetzt den korrekten autoprefixierten und optimierten Code enthält.
Dank der Erstellung des PostStylus-Pakets von Sean King, das die Verarbeitung von Stylus und PostCSS kombiniert, arbeiten Stylus und PostCSS besonders gut zusammen. Wenn Sie ein Stylus-Entwickler sind, können Sie einfach PostStylus zu Ihrem Kompilierungsprozess hinzufügen und haben sofort Zugriff auf die Verwendung von PostCSS-Plugins als Teil Ihres Workflows.
PostStylus: https://github.com/seaneking/poststylus
Wenn Sie das vorgefertigte Gulpfile aus dem Startprojekt verwenden, werden Sie feststellen, dass es das gulp-postcss-Plugin verwendet. Das ist eigentlich nur dort, da es für die Sass- und LESS-Setup-Prozesse benötigt wird, aber für Stylus brauchen wir es nicht, da wir stattdessen PostStylus als Compiler verwenden.
Sie können es mit aus Ihrem Projekt entfernen npm uninstall gulp-postcss --save-dev, und lösche diese Zeile aus deiner Gulpfile:
var postcss = required ('gulp-postcss');Jetzt können wir die zwei Plugins installieren, die wir für die Kompilierung von Stylus und PostCSS benötigen, indem Sie den folgenden Befehl ausführen:
npm install gulp-stylus poststylus --save-dev
Aktualisieren Sie Ihre Gulpfile, um zu werden:
var gulp = required ('gulp'); var stylus = required ('gulp-stylus'); var poststylus = erfordern ('poststylus'); var autoprefixer = required ('autoprefixer'); var cssnano = erfordern ('cssnano'); gulp.task ('css', function () var processingors = [autoprefixer, cssnano]); gulp.src ('./ src / *. styl') .pipe zurückgeben (Stift (use: [poststylus (prozessoren))] )) .pipe (gulp.dest ('./ dest')););Das haben wir oben gemacht:
Schluck-Stift, Poststylus, Autoprefixer und Cssnano Autoprefixer und Cssnano Variablen zum Prozessoren Array.Rohr() Zeile, die gelesen wird .Pipe (Postcss (Prozessoren)) .Pfeife (Stift (… , um die gulp-stylus- und poststylus-Module für die Kompilierung festzulegen Jetzt können wir die Kompilierung testen. Benennen Sie in Ihrem "src" -Ordner "style.css" in "style.styl" um und fügen Sie diesen Test-Stylus-Code hinzu:
$ font-stack = Helvetica, serifenlos $ primary-color = # 333 Body-Schriftart: 100% $ font-stack-Farbe: $ primary-color
Führen Sie das aus Schluck Css Befehl und Sie sollten eine "style.css" -Datei mit folgendem Inhalt in Ihrem "dest" -Ordner sehen:
body font: 100% Helvetica, serifenlos; Farbe: # 333;
Fügen Sie den zuvor bereitgestellten PostCSS-Testcode Ihrer "style.styl" -Datei hinzu. Stellen Sie sicher, dass im eingefügten Code nur Registereinrückungen und keine Leerzeichen enthalten sind.
Kompilieren Sie erneut und prüfen Sie, ob Sie die entsprechende Ausgabe in Ihrer Datei "dest / style.css" haben.
body font: 100% Helvetica, serifenlos; Farbe: # 333 .css_nano, .css_nano + p, [class * = css_nano] display: -webkit-box; display: -webkit-flex; display: -ms -flexbox; Anzeige: flex; Rand: 1rem 2.5rem 2rem 1.5rem; Schriftgewicht: 400; Auffüllung: 1.75rem; Breite: 46.5rem
Wie beim Gulp-Projekt für Stylus ist der Standard-PostCSS-Compiler, der mit dem Starter-Projekt geliefert wird, nicht erforderlich, da er nur für Sass- und LESS-Setup-Prozesse vorhanden ist. Sie können es mit aus Ihrem Projekt entfernen npm uninstall grunt-postcss --save-dev.
Jetzt können wir Grunt-Contrib-Stift und Poststylus mit dem Befehl installieren:
npm install grunt-contrib-stylus poststylus --save-dev
Wir werden keine Grunt-Postcss mehr verwenden, suchen Sie also diese Zeile:
grunt.loadNpmTasks ('grunt-postcss');Und ersetze es mit:
grunt.loadNpmTasks ('grunt-contrib-stylus');Da wir kein Grunt-Postcss verwenden, brauchen wir das nicht mehr postcss Aufgabe, die wir im Inneren definiert haben grunt.initConfig (…);. Löschen Sie diese Task-Konfiguration und ersetzen Sie sie durch diese neue Stift Aufgabe:
Stylus: compile: Optionen: , Dateien: 'dest / style.css': 'src / style.styl'
Jetzt können wir die Kompilierung testen. Benennen Sie in Ihrem "src" -Ordner "style.css" in "style.styl" um und fügen Sie diesen Test-Stylus-Code hinzu:
$ font-stack = Helvetica, serifenlos $ primary-color = # 333 Body-Schriftart: 100% $ font-stack-Farbe: $ primary-color
Führen Sie den Befehl aus grunzen und Sie sollten eine "style.css" -Datei mit folgendem Inhalt in Ihrem "dest" -Ordner sehen:
body font: 100% Helvetica, serifenlos; Farbe: # 333
Um unsere PostCSS-Plugins in den Kompilierungsprozess einzufügen, müssen Sie diesen Code zunächst ganz oben in unserer Gruntfile oberhalb der module.exports… Linie:
var poststylus = function () return required ('poststylus') (['autoprefixer', 'cssnano']);Hier laden Sie alle PostCSS-Plugins, die Sie verwenden möchten, und nicht nur ein Prozessoren Array, wie Sie es von unseren anderen Tutorials gewohnt sind.
Dann finde die Optionen Objekt innerhalb der Stiftaufgabe, und aktualisieren Sie es wie folgt:
Optionen: use: [poststylus],
Dies weist den Grunt-Contrib-Stift an, Poststylus während der Kompilierung und die dazugehörigen Plugins zu verwenden.
Fügen Sie der Datei "src / style.styl" den "PostCSS-Testcode" hinzu grunzen, und Sie sollten den folgenden Inhalt in Ihre Datei "dest / style.css" schreiben:
body font: 100% Helvetica, serifenlos; Farbe: # 333 .css_nano, .css_nano + p, [class * = css_nano] display: -webkit-box; display: -webkit-flex; display: -ms -flexbox; Anzeige: flex; Rand: 1rem 2.5rem 2rem 1.5rem; Schriftgewicht: 400; Auffüllung: 1.75rem; Breite: 46.5rem
Installieren Sie das schlupffreie Modul mit in Ihr Projekt npm install gulp-less --save-dev.
Jetzt können Sie Ihre Gulpfile folgendermaßen aktualisieren:
var gulp = required ('gulp'); var postcss = required ('gulp-postcss'); var less = erfordern ('schlucklos'); var autoprefixer = required ('autoprefixer'); var cssnano = erfordern ('cssnano'); gulp.task ('css', function () var processingors = [autoprefixer, cssnano]); gulp.src ('./src / *. less') .pipe (less ()) .pipe (Prozessoren) zurückgeben ) .pipe (gulp.dest ('./ dest')););Brechen wir auf, was wir vom Standard-Starter Gulpfile geändert haben:
schlucklos, Autoprefixer und Cssnano Autoprefixer und Cssnano Variablen zum Prozessoren Array.Rohr (weniger ()) Um den LESS zu verarbeiten, stellen Sie sicher, dass er vor der Zeile steht, die PostCSS verarbeitetJetzt können wir einige Tests ausführen, um sicherzustellen, dass sowohl LESS als auch PostCSS wie erwartet kompilieren.
Benennen Sie die vorhandene Datei "src / style.css" in "src / style.less" um und fügen Sie den folgenden Testcode hinzu:
@ font-stack: Helvetica, serifenlos; @ Primärfarbe: # 333; body font: 100% @ font-stack; Farbe: @ Primärfarbe;
Lauf Schluck Css und Sie sollten eine neue "style.css" -Datei im Ordner "dest" mit dem Inhalt sehen:
body font: 100% Helvetica, serifenlos; Farbe: # 333
Fügen Sie jetzt in Ihrer Datei "style.less" den PostCSS-Testcode hinzu, der weiter oben in diesem Lernprogramm bereitgestellt wurde.
Führen Sie Ihre Schluck Css Befehl und Sie sollten jetzt den richtigen Code in Ihrer Datei "dest / style.css" sehen.
body font: 100% Helvetica, serifenlos; Farbe: # 333 .css_nano, .css_nano + p, [class * = css_nano] display: -webkit-box; display: -webkit-flex; display: -ms -flexbox; Anzeige: flex; Rand: 1rem 2.5rem 2rem 1.5rem; Schriftgewicht: 400; Auffüllung: 1.75rem; Breite: 46.5rem
Installieren Sie in Ihrem neuen Grunt-Projekt das gruntunabhängige Modul mit npm installiert grunt-contrib-less, dann fügen Sie ein grunt.loadNpmTasks () Funktion dafür unter der bestehenden, die Sie für PostCSS haben:
grunt.loadNpmTasks ('grunt-postcss'); grunt.loadNpmTasks ('grunt-contrib-less');Sie müssen jetzt eine neue Aufgabe für die Verarbeitung von WENIGER einrichten. Nach dieser Zeile:
grunt.initConfig (
… Aber vor dem Bestehenden postcss Aufgabe, fügen Sie diesen Code hinzu:
less: production: files: 'src / style.css': 'src / style.less',
Jetzt registrieren wir eine Aufgabe, um LESS auszuführen und dann PostCSS. Nach dem grunt.loadNpmTasks () Funktion, die Sie gerade eingefügt haben, fügen Sie hinzu:
grunt.registerTask ('css', ['less', 'postcss']);Um Ihr Setup zu testen, benennen Sie Ihre Datei "style.less" um. Fügen Sie diesen LESS-Code hinzu:
@ font-stack: Helvetica, serifenlos; @ Primärfarbe: # 333; body font: 100% @ font-stack; Farbe: @ Primärfarbe;
Führen Sie den Befehl aus grunzen css Sie sollten eine neue Datei mit dem Namen "style.css" in Ihrem "dest" -Ordner sehen, die folgenden Code enthält:
body font: 100% Helvetica, serifenlos; Farbe: # 333333;
Jetzt fügen wir unsere PostCSS-Plugins in den Kompilierungsfluss ein. Aktualisieren Sie Ihre Gruntfile Prozessoren Array zu Folgendem:
Prozessoren: [Require ('Autoprefixer') (), Required ('cssnano') ()]Fügen Sie der "style.less" -Datei den PostCSS-Testcode hinzu. Führen Sie den Befehl aus grunzen css wieder und Sie sollten finden, dass Ihre neu kompilierte "dest / style.css" -Datei nun den korrekten autoprefixierten und optimierten Code enthält:
body font: 100% Helvetica, serifenlos; Farbe: # 333 .css_nano, .css_nano + p, [class * = css_nano] display: -webkit-box; display: -webkit-flex; display: -ms -flexbox; Anzeige: flex; Rand: 1rem 2.5rem 2rem 1.5rem; Schriftgewicht: 400; Auffüllung: 1.75rem; Breite: 46.5rem
Als Nächstes werden wir etwas überlegen, das Sie fast für eine andere Art der Vorverarbeitung halten könnten, indem Sie PostCSS verwenden, um automatisch BEM / SUIT-kompatible CSS-Klassen zu generieren. Dieser Prozess macht die Entwicklung von BEM / SUIT wesentlich einfacher, ganz zu schweigen von der Effizienz.
Wir sehen uns im nächsten Tutorial!
