Tauchen Sie ein in die Zukunft von CSS mit PostCSS - JS - Republic's Blog

Bevor wir erklären, was PostCSS ist, wollen wir zunächst verstehen, was PostCSS nicht ist.

Wenn Leute zum ersten Mal von PostCSS hören, denken sie im Wesentlichen daran, dass es sich um einen neuen CSS-Präprozessor handelt, ähnlich wie SASS, LESS und Stylus.

Wenn Sie es als Präprozessor verwenden möchten, funktioniert es wie ein Präprozessor. Gleichzeitig verfügt es auch über Postprozessoren, Optimierungstools, Plug-Ins, die mit zukünftigen Grammatiken kompatibel sind ... Sie haben alle Funktionen, die Sie wollen.

Der Hauptzweck von PostCSS besteht darin, Ihnen die Verwendung einer Vielzahl von Tools zu ermöglichen, die Ihren Anforderungen entsprechen.

Sie sollten sich PostCSS also als Build-Tool vorstellen. Es ermöglicht Ihnen die Verwendung verschiedener JavaScript-Plug-Ins zur Pflege Ihres CSS. Diese Plugins finden Sie in postcss.parts hier

Da es so viele Plugins gibt, werden wir in diesem Artikel die am häufigsten verwendeten und leistungsstärksten vorstellen.

Gleichzeitig erfahren Sie, wie Sie mit Gulp eine einzelne Aufgabe zur Verarbeitung von CSS-Dateien erstellen.

Autoprefixer

Wenn Sie schon einmal einen Präprozessor verwendet haben, werden Sie erleben, wie angenehm es ist, keine Präfixe schreiben zu müssen.

Es ist beispielsweise nicht erforderlich,

:-webkit-full-screen a {
 display: -webkit-box;
 display: flex
}
:-moz-full-screen a {
 display: flex
}
:-ms-fullscreen a {
 display: -ms-flexbox;
 display: flex
}
:fullscreen a {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex
}

zu schreiben Einfach

:fullscreen a {
 display: flex
}

Wenn Sie es selbst ausprobieren möchten, können Sie diese interaktive Demo http://autoprefixer.github.io

verwenden Dokument klicken Sie hier: github.com/postcss/autoprefixer

PreCSS

Auch wenn PostCSS kein Präprozessor wie SASS ist, können Sie über einige Plug-Ins dennoch Dateien im Sass-ähnlichen Format verarbeiten.

Das bevorzugte Plug-In ist PreCSS, das eine große Anzahl von PostCSS-Plug-Ins integriert und es Ihnen ermöglicht, Sass-Syntaxstile zu schreiben.

Ich lade Sie ein, die Dokumentation für weitere Einzelheiten zu lesen und auch mit der interaktiven Demo zu spielen, um die Möglichkeiten zu testen.

CssNext

CSS4, die nächste Generation von CSS, verspricht, die Art und Weise zu ändern, wie CSS geschrieben wird und wie Selektoren verwendet werden.

Leider befinden sich die Spezifikationen für diese Version noch in der Entwicklung und ein Veröffentlichungsdatum wurde noch nicht bekannt gegeben.

Glücklicherweise gibt es ein Plug-in namens CssNext, das Ihnen helfen kann, wenn Sie einige der Funktionen der nächsten CSS-Generation nutzen möchten.

Die offizielle Website von CSSNext listet alle unterstützten Funktionen auf: cssnext.io/features/

Sie können auch hier spielen: cssnext.io/playground/

CssNano

Zu guter Letzt noch zur Optimierung. CssNano kann Ihren CSS-Code mithilfe verschiedener Module komprimieren und optimieren.

Ich empfehle Ihnen, den Z-Index zu deaktivieren, da er Ihren normalen Z-Index durcheinander bringen könnte.

Sie können diese Liste der Optimierungen einsehen: cssnano.co/optimisations/ Sie können auch mit dem Ersteller von CssNano auf Gitter chatten: gitter.im/ben-eb/cssnano

Sehen wir uns nun an, wie man diese Plugins mit Gulp verwendet.

​Gulp x PostCSS

Schluck

Installieren Sie zunächst Gulp, Gulp Load Plugins und Gulp PostCSS als Entwicklungsabhängigkeiten. Führen Sie den folgenden Befehl in der Konsole aus:

npm i -D gulp gulp-load-plugins gulp-postcss

Erstellen Sie eine gulpfile.js, in der Sie Gulp verwenden müssen, und fügen Sie den folgenden Code hinzu.

var gulp = require('gulp'),

Fügen Sie den Code der Gulp Load Plugins hinzu:

$ = require('gulp-load-plugins')();

Die Gulp Load Plugins-Abhängigkeit ruft die benötigten Plug-Ins über $ auf.

PostCSS

Als nächstes müssen Sie das erforderliche PostCSS-Plug-in auf die gleiche Weise wie die Dev-Abhängigkeit

npm i -D autoprefixer cssnano cssnext precss

installieren Fügen Sie es nach der Installation zu gulpfile.js hinzu

// PostCSS Plugins
var autoprefixer = require('autoprefixer'),
cssnext = require('cssnext'),
precss = require('precss'),
cssnano = require('cssnano');

Beginnen Sie als Nächstes mit dem Schreiben der Gulp-CSS-Aufgabe

// Gulp task to process CSS with PostCSS plugins 
gulp.task('css', function() {

 });

In dieser Aufgabe verwenden wir zunächst eine Variable, um das zu verwendende PostCSS-Plug-in zu speichern

var processors = [autoprefixer, cssnext, precss, cssnano({zindex: false})];

Legen Sie den zindex:false von CssNano fest, um zu verhindern, dass unser Z-Index zurückgesetzt wird.

Um CSS-Dateien zu verarbeiten, müssen wir die folgenden Dateien abrufen:

return gulp.src('./source/css/style.css')

Verarbeiten Sie dann die CSS-Datei über das PostCSS-Plugin in der Prozessorvariablen.

Verwenden Sie die Pipe-Methode, um die Verarbeitung in Reihe zu schalten

.pipe($.postcss(processors))

Verwenden Sie den folgenden Code, um die verarbeitete Datei auszugeben

.pipe(gulp.dest('./public/assets/stylesheets'));

All dies müssen Sie tun, wenn Sie das PostCSS-Plug-in zur Verarbeitung von CSS verwenden.

var gulp = require('gulp'),
$ = require('gulp-load-plugins')();

// PostCSS Plugins
var autoprefixer = require('autoprefixer'),
cssnext = require('cssnext'),
precss = require('precss'),
cssnano = require('cssnano');

// Gulp task to process CSS with PostCSS plugins
gulp.task('css', function() {
var processors = [autoprefixer, cssnext, precss, cssnano({zindex: false})];

return gulp.src('./source/css/style.css')
.pipe($.postcss(processors))
.pipe(gulp.dest('./public/assets/stylesheets'));
});

Es gibt eine vollständige und detaillierte Anleitung zu Tuts+, ich empfehle Ihnen dringend, sie zu lesen: webdesign.tutsplus.com/series/postcss-deep-pe–cms-889

Ich habe diese PostCSS-Plug-Ins auch verwendet, um eine Boilerplate-Vorlage zu erstellen, die Ihnen den schnellen Einstieg erleichtert: /github.com/PierrickGT/PCGB

blog.js-republic.com/jump-into-the-future-of-css-with-postcss/

Das obige ist der detaillierte Inhalt vonTauchen Sie ein in die Zukunft von CSS mit PostCSS - JS - Republic's Blog. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!