Schlüsselpunkte

• postCSS erm?glicht es Entwicklern, ihre eigenen CSS -Pr?prozessoren zu erstellen und eine gr??ere Flexibilit?t und Kontrolle über andere Pr?prozessoren wie SASS, Weniger oder Stift zu bieten. Es verwendet JavaScript-Plugin, um Stile zu manipulieren, und kann pr?prozessor?hnliche Funktionen wie Variablen, Mixins und Nisting hinzufügen.
• Die Vorteile von PostCS sind Modularit?t, leichte Builds, sofortige Implementierung neuer Merkmale und die F?higkeit zur Durchsetzung von Entwicklungsstrategien. Es ist auch schneller als herk?mmliche Pr?prozessoren. Es hat jedoch auch einige Nachteile, wie die erh?hte Komplexit?t des Build -Prozesses, unterschiedliche Syntax und die Anforderungen an effektive CSS.
• W?hrend PostCSS ein gro?es Potenzial hat, ist es m?glicherweise nicht für alle Projekte geeignet. Es kann eine attraktive Option für kleine, einfache Projekte oder einzelne Teams sein. Für gro?e Teams oder Projekte sind vorhandene Pr?prozessoren jedoch aufgrund des gro?en Verst?ndnisses und der Verwendung von SASS m?glicherweise immer noch die erste Wahl.

Viele Entwickler haben derzeit weniger, Stylus oder die beliebtesten Sass -Sasss übernommen. Im Idealfall sollten Sie auch Ihr CSS mit dem Autoprefixer nacharbeiten, um Anbieter-Pr?fixe bei Bedarf hinzuzufügen, ohne Frameworks wie Mixin oder Kompass zu verwenden. Autoprefixer ist ein Plugin für Postcs. Es gibt viele andere verfügbare Plugins, die pr?prozessor?hnliche Funktionen wie Variablen, Mixins und Nisting implementieren. Ben Frains jüngster Artikel "Aufbrechen mit Sass: Nicht du, ich bin es", bringt einen interessanten Vorschlag vor. Angesichts der Tatsache, dass Sie POSTCS zum Erstellen des CSS -Pr?prozessors verwenden k?nnen, den Sie m?chten, ben?tigen Sie wirklich Sass, weniger oder Stift? Ein grundlegender sass?hnlicher Parser kann w?hrend Ihres Erstellungsvorgangs erstellt werden. In diesem Beispiel werde ich eine Gulp.js -Taskdatei verwenden, aber dasselbe Konzept gilt für Grunzen oder ein anderes Build -System. Zun?chst verwenden wir NPM, um PostCS und die erforderlichen Plugins zu installieren, zum Beispiel:

npm install gulp-postcss postcss-mixins postcss-simple-vars postcss-nested autoprefixer-core --save-dev

Erstellen Sie dann ein Array von CSS -Verarbeitungsfunktionen in gulpfile.js, zum Beispiel:

var
    gulp = require('gulp'),
    postcss = require('gulp-postcss'),
    processors = [
        require('postcss-mixins'),
        require('postcss-simple-vars'),
        require('postcss-nested'),
        require('autoprefixer-core')({ browsers: ['last 2 versions', '> 2%'] })
    ];

und schreiben Sie eine CSS -Verarbeitungsaufgabe, zum Beispiel:

// 編譯CSS
gulp.task('css', function() {
  return gulp.src('source/css/styles.css')
    .pipe(postcss(processors))
    .pipe(gulp.dest('dest/styles/'));
});

Sie k?nnen auch die POSTCSS -API verwenden, um Ihre eigenen Verarbeitungsfunktionen zu erstellen. Zum Beispiel k?nnen wir einen seriF-Fallback für alle Schriftfamilienerkl?rungen anwenden:

processors = [
        require('postcss-mixins'),
        require('postcss-simple-vars'),
        require('postcss-nested'),
        function(css) {
            // sans-serif 后備
            css.eachDecl('font-family', function(decl) {
                decl.value = decl.value + ', sans-serif';
            });
        },
        require('autoprefixer-core')({ browsers: ['last 2 versions', '> 2%'] })
    ];

Wenn die Datei /source/css/styles.css den folgenden Code enth?lt:

$colorfore: #333;
$colorback: #fff;

@define-mixin reset {
    padding: 0;
    margin: 0;
}

main {
    font-family: Arial;
    @mixin reset;
    color: $colorfore;
    background-color: $colorback;

    article {
        color: $colorback;
        background-color: $colorfore;
    }
}

Gulp -CSS erstellen dieses CSS in /dest/css/styles.css:

main {
    font-family: Arial, sans-serif;
    padding: 0;
    margin: 0;
    color: #333;
    background-color: #fff;
}

main article {
    color: #fff;
    background-color: #333;
}

Vorteile

postCSS erm?glicht es Ihnen, die Einschr?nkungen und Auswahlm?glichkeiten zu entfernen, die von Pr?prozessoren -Autoren auferlegt werden. Diese Methode bietet mehrere Vorteile:

• Modular Sie müssen nur die erforderlichen Plugins und Funktionen für Ihr Projekt hinzufügen.
• Leichte Pr?prozessoren werden immer gro? und komplexer. M?glicherweise m?chten oder verwenden Sie nicht jede Funktion, aber sie existieren immer noch. Postcss reduziert das Volumen.
• Instant Implementierung Haben Sie jemals darauf gewartet, dass bestimmte Funktionen in SASS, LISBSSASE, WENIGEN, STYLUS oder anderen Pr?zessoren verfügbar sind? Sie k?nnen jetzt verwenden ...
• JavaScript -Funktionen Ihr CSS -Pr?prozessor verwendet JavaScript - eine echte Programmiersprache (obwohl einige sagen!). Die meisten Pr?prozessor -Sprachstrukturen sind grundlegend. Sie sehen oft komplexere und schwer verst?ndliche Funktionen und Mischungen als die ursprünglichen CSS, die sie erstellen. Mit postCSS k?nnen Sie einfach Dateien ?ffnen, aus Datenbanken lesen, HTTP -Anforderungen ausstellen oder komplexe Berechnungen durchführen.
• Durchsetzen von Entwicklungsstrategien Angenommen, Sie m?chten, dass Ihr Team @extend -Aussagen verwendet. Sofern sie dem Build -Prozess nicht ein Extend -Plugin hinzufügen, steht @Extend niemandem zur Verfügung. Dies wird sofort offensichtlich sein.
• Es ist schnell - sehr schnell Der Autor sch?tzt die Postcss 4-40 -mal schneller als ?quivalente Pr?prozessoren. Wenn nur wenige Plugins ben?tigt würden, denke ich, dass die Vorteile h?her w?ren. Die gesamte L?sung ist in JavaScript eingebaut und muss nicht in eine andere Bibliothek oder Sprachdolmetscher springen.

Nachteile

Also ist alles in Ordnung? Leider ist PostCSS nicht die perfekte L?sung:

• Eine erh?hte Komplexit?t Ihr Build -Prozess wird schwieriger zu verwalten. Das Hinzufügen von SASS ist normalerweise ein oder zwei Zeilen von Code, aber PostCSS erfordert mehr Planung - zumal Plugins in einer bestimmten Reihenfolge aufgerufen werden müssen. Beispielsweise sollte @import Inline vor dem Parsen der Variablen analysiert werden. Aber was ist, wenn Ihre @import -Erkl?rung Variablen enth?lt? In einigen F?llen kann es erforderlich sein, das Plugin mehrmals anzurufen.
• Verschiedene Syntax Ich habe zun?chst versucht, ein kleines SASS -Projekt in Postcss umzuwandeln. Versuchen Sie es nicht einmal! Obwohl ich erfolgreich war, verwenden Postcss-Plugins h?ufig etwas unterschiedliche Syntaxe wie @Define-Mixin anstelle von @mixin. Dies kann zu Verschleierung und vielen Code -Updates führen. Ein Teil des Grundes ist ...
• postcss erfordert gültige CSS Die meisten Pr?prozessoren analysieren einfache Textdateien, sodass jede Syntax theoretisch m?glich ist. POSTCSS erstellt ein Objektmodell, daher erfordert es von Anfang an syntaktisch korrektes CSS. Auch ein // einzelner Zeilenkommentar kann dazu führen, dass es fehlschl?gt. Sie k?nnen Ihre CSS -Dateien vorab, bevor Sie sie an Postcss weitergeben, aber dann verwenden Sie wieder den Pr?prozessor!

Sollten Sie Ihren Pr?prozessor aufgeben?

Wenn Sie ein kleines, relativ einfaches eigenst?ndiges Projekt in einem einzigen Team starten, kann ein benutzerdefinierter Postcss -Prozessor eine attraktive Option sein. Ich empfehle auch PostCSS für alle realen Nachbearbeitungsaufgaben wie Anbieter -Pr?fix, Verpackung von Medienabfragen zu einer einzigen Deklaration, Reduzierung von Calc () -Abgleisen, Unterstützung für alte Browser -Anwendungen, Unterstützung von CSS4 -Selektoren, Schrumpfung usw. Es gibt keinen Vorteil, diese Aufgaben selbst zu erledigen. Sass hat jedoch eine kritische Masse erreicht. Keine Pr?prozessorsyntax ist perfekt, wird jedoch von den meisten Entwicklern in Ihrem Team verstanden. Es ist unwahrscheinlich, dass ein subtiler Unterschied erhebliche Vorteile bietet oder allen anspricht. Das hei?t, Postcss und ?hnliche Nacharbeit haben ein gro?es Potenzial. Wenn ein modulares CSS -Plug -In -System - oder sogar mischen kann -die Syntax und Funktionalit?t von SASS, weniger und Stift, die wir wollen, haben wir einen Pr?prozessor, der alle anderen Vorprozessoren -Utensilien schlagen kann. Sie k?nnen wetten, dass jemand dieses Projekt jetzt entwickelt ...

Haben Sie POSTCS erfolgreich als Pr?prozessor für Ihr Projekt verwendet? Zieht es dich von Sass weg? Wirst du von weniger migrieren? Wirst du Stift aufgeben?

faqs über postcss

Was ist der Hauptunterschied zwischen Postcss und anderen CSS -Pr?prozessoren?

postCSS ist ein Tool, das JavaScript -Plugin zum Konvertieren von Stilen verwendet. Diese Plugins k?nnen verschiedene Aufgaben wie Codesortierung, Hinzufügen von Anbieterpr?fixen und sogar zukünftige CSS -Funktionen ausführen. Im Gegensatz zu anderen CSS-Pr?prozessoren wie SASS oder weniger verfügt die Postcss keine integrierte Syntax. Stattdessen werden Plugins zum Konvertieren von CSS verwendet. Dies macht es flexibler und anpassbarer, da Sie nur die Plugins ausw?hlen k?nnen, die Sie für Ihr Projekt ben?tigen.

Wie installiere und verwende ich Postcss?

Um postCSS zu installieren, müssen Sie Node.js und NPM auf Ihrem Computer installieren. Anschlie?end k?nnen Sie postcsss weltweit mit dem Befehl

installieren. Um POSTCSS zu verwenden, müssen Sie das von Ihnen gewünschte Plugin installieren und dann eine Konfigurationsdatei erstellen, die das von Ihnen gewünschte Plugin angibt. Anschlie?end k?nnen Sie POSTCS auf Ihrer CSS -Datei mit dem Befehl npm install -g postcss-cli ausführen. postcss input.css -o output.css

Was sind einige beliebte Postcss -Plugins?

Es gibt viele Postcss -Plugins mit jeweils einen anderen Zweck. Einige beliebte Plugins sind Autoprefixer, das automatisch Anbieter -Pr?fixe zu Ihrem CSS hinzufügt.

Kann ich Postcss mit anderen CSS -Pr?prozessoren verwenden?

Ja, Sie k?nnen Postcss mit anderen CSS -Pr?prozessoren wie Sass oder weniger verwenden. Auf diese Weise k?nnen Sie die F?higkeiten dieser Pr?prozessoren nutzen und gleichzeitig von der Flexibilit?t und Kraft von Postcss profitieren.

Was sind die Vorteile der Verwendung von Postcss?

postcss bietet viele Vorteile. Es ist sehr anpassbar, sodass Sie nur die gewünschten Plugins ausw?hlen k?nnen. Dies kann zu einem kleineren, schnelleren Build -Prozess führen. Mit PostCSS k?nnen Sie heute zukünftige CSS -Funktionen verwenden. Sie fügt Ihrem CSS automatisch Anbieter -Pr?fixe hinzu, um Ihnen Zeit zu sparen und sicherzustellen, dass Ihr Stil in verschiedenen Browsern ordnungsgem?? funktioniert.

Was sind die Nachteile der Verwendung von Postcss?

W?hrend Postcss leistungsstark und flexibel ist, kann seine Lernkurve steiler sein als andere CSS -Pr?prozessoren. Da es auf Plugins beruht, müssen Sie Zeit damit verbringen, das richtige Plugin für Ihr Projekt zu recherchieren und auszuw?hlen. Da es sich um ein neueres Werkzeug handelt, ist es m?glicherweise nicht so weitgehend unterstützt oder angenommen wie andere Pr?prozessoren.

Wie handelt es sich bei Postcss mit Mixin?

postcss verarbeitet Mixin durch das Postcss-Mixins-Plugin. Mit diesem Plugin k?nnen Sie Mixins in CSS definieren und verwenden, ?hnlich wie Sie es in SASS oder weniger tun. Sie k?nnen ein Mixin in der POSTCSS -Konfigurationsdatei definieren und in Ihrem CSS mithilfe des Schlüsselworts @mixin verwenden.

Kann ich Postcss in meinem vorhandenen Projekt verwenden?

Ja, Sie k?nnen Postcs in Ihre vorhandenen Projekte integrieren. Sie müssen nur PostCS und das von Ihnen gewünschte Plugin installieren und dann eine PostCSS -Konfigurationsdatei einrichten. Sie k?nnen dann Postcs in der vorhandenen CSS -Datei ausführen.

Wie vergleichen sich Postcss mit anderen Tools wie Autoprefixer oder CSSNext?

Autoprefixer und CSSNext sind tats?chlich Postcss -Plugins. Dies bedeutet, dass es sich um Werkzeuge handelt, die auf Postcs ausgeführt werden und die Plug-in-Architektur nutzen. AutoPrefixer fügt Ihrem CSS das Pr?fix des Anbieters hinzu, w?hrend Sie mit CSSNext heute zukünftige CSS -Funktionen verwenden k?nnen.

Ist PostCSS für gro?e Projekte geeignet?

Ja, Postcss eignet sich für Projekte jeder Gr??e. Da es anpassbar ist, k?nnen Sie nur die gewünschten Plugins ausw?hlen und einen kleineren, schnelleren Build -Prozess aktivieren. Dies macht es zu einer guten Wahl für gro?e Projekte, bei denen Leistung ein Problem darstellt.

Das obige ist der detaillierte Inhalt vonSo bauen Sie Ihr eigenes CSS -Pr?prozessor mit PostCSS auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!