So bauen Sie Ihr eigenes CSS -Präprozessor mit PostCSS auf

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!