So verwenden Sie PostCSS als konfigurierbare Alternative zu SASS

Webentwickler lieben Sass CSS -Präprozessoren. Nach Ansicht von Sass aus der Umfrage des Bundesstaates CSS versteht jeder Entwickler SASS, 89% der Entwickler verwenden es regelmäßig und 88% der Entwickler sind mit ihm sehr zufrieden.

In vielen Webpackagern wird die SASS -Verarbeitung enthalten. Sie können jedoch auch Postcss verwenden, ohne es zu wissen. POSTCSS ist hauptsächlich für sein Autoprefixer -Plugin bekannt, das bei Bedarf automatisch -webkit-, -moz- und -ms -Anbieter -Präfixe zu CSS -Eigenschaften hinzugefügt wird. Das Plugin -System bedeutet, dass es mehr kann ... Sie können beispielsweise .Scss -Dateien kompilieren, ohne den Sass -Compiler zu verwenden.

In diesem Tutorial wird erläutert, wie Sie einen benutzerdefinierten CSS -Präprozessor erstellen, der die SASS -Syntax kompiliert und weitere Funktionen hinzufügt. Es ist ideal für jeden, der einige Knoten.js kennt und bestimmte CSS -Anforderungen hat.

Schlüsselpunkte

Konfigurierbarkeit und Anpassung: POSTCSS bietet eine hochkonfigurierbare Umgebung im Vergleich zu SASS. Es läuft basierend auf der Plug-in-Architektur. Jedes Plug-In führt bestimmte Aufgaben aus, sodass Entwickler ihre Einstellungen entsprechend den spezifischen Projektanforderungen anpassen können.
Leistungsnotizen: Während der Dart-basierte Sass-Compiler schnell ist, können Postcss auf JavaScript langsamer sein. Für Projekte, die bereits Postcss verwenden, kann der Geschwindigkeitsunterschied jedoch vernachlässigbar sein, was es zu einer praktikablen Einzelprozesslösung macht.
Installation und Setup: Postcss kann in verschiedene Build -Tools integriert oder aus der Befehlszeile ausgeführt werden. Die grundlegenden Einstellungen für eine sassähnliche Umgebung erfordern die Installation mehrerer Plug-Ins wie
• , postcss-scss, postcss-advanced-variables und postcss-nested. autoprefixer
Verwenden Sie Plug-Ins, um die Funktionalität zu verbessern: Postcss geht über die herkömmlichen Präprozessorfunktionen hinaus, und seine Plug-Ins können Design-Token verarbeiten, Medienabfragen optimieren, Assets verwalten und sogar basierend auf der Umgebung die CSS-Komprimierung durchführen.
Potenzial zur Vereinfachung des Entwicklungsstapels: Für Teams, die bereits Postcss verwenden, kann es möglich sein, SASS im Entwicklungsstapel vollständig zu beseitigen und sich auf Postcs zu verlassen, um alle CSS-Verarbeitungsanforderungen zu erfüllen, einschließlich der Handhabung von SASS-ähnlichen Syntax und Funktionen.

Schnellstart

Ein Postcss -Beispielprojekt kann aus GitHub geklont werden. Es erfordert Node.js. Führen Sie also die NPM -Installation aus, um alle Abhängigkeiten zu erhalten.

Kompilieren Sie den Demo SRC/scss/main.scss Quellcode zum Erstellen/CSS/main.css mit dem folgenden Befehl:

<code>npm run css:dev</code>

Verwenden Sie den folgenden Befehl, um automatisch zu kompilieren, wenn sich die Datei ändert:

<code>npm run css:watch</code>

und dann beenden Sie die Überwachung durch Drücken von

Strg | Diese beiden Optionen erstellen auch eine Quellkarte in Build/CSS/main.css.map, die die ursprüngliche Quelldatei im Entwickler -Tool verweist. komprimierte CSS ohne Quellkarte auf Produktionsebene kann mit dem folgenden Befehl kompiliert werden:

Weitere Informationen finden Sie in der Datei readme.md.

Sollten Sie SASS durch Postcss ersetzen?

<code>npm run css:build</code>

Der Sass -Compiler hat keine Probleme, aber bitte berücksichtigen Sie die folgenden Faktoren.

Modulabhängigkeiten

Die neueste Version von Dart SASS kann weltweit mit npm Paketmanager npm installiert werden:

<code>npm run css:dev</code>

sass .scss code mit dem folgenden Befehl kompilieren:

<code>npm run css:watch</code>

generieren Sie automatisch Quellkarten (-No-Source-Map schließt sie) oder fügen Sie sie hinzu, um sie automatisch zu kompilieren, wenn sich Quelldateien ändern.

Die neueste Version des SASS -Installationsraums beträgt weniger als 5 MB.

postcss sollte weniger Ressourcen erfordern, und ein grundlegender Compiler im Sass-Stil mit automatischem Präfix und Komprimierung erfordert weniger als 1 MB Platz. Tatsächlich erweitert Ihr Ordner node_modules auf über 60 MB und erhöht sich schnell, wenn mehr Plugins hinzugefügt werden. Dies geht hauptsächlich darum, andere Abhängigkeiten in NPM zu installieren. Auch wenn Postcss sie möglicherweise nicht verwenden, kann dies nicht als leichte Alternative angesehen werden.

Wenn Sie jedoch bereits POSTCS für Autoprefixer oder andere Zwecke verwenden, benötigen Sie möglicherweise keine SASS.

Verarbeitungsgeschwindigkeit

Der langsame Rubin-Basis-Sass-Compiler ist seit langem verschwunden, und die neueste Version verwendet die kompilierte Dart-Laufzeit.

Es ist sehr schnell .

postcss ist reines JavaScript, und während die Benchmarks variieren, kann es beim Kompilieren desselben Quellcode dreimal langsamer sein.

Wenn Sie jedoch bereits Postcss nach SASS ausführen, ist dieser Geschwindigkeitsunterschied weniger auffällig. Ein zweistufiger Prozess kann langsamer sein als die Verwendung von Postcs allein, da ein Großteil seiner Arbeit die Tokenisierung der CSS-Eigenschaften beinhaltet.

benutzerdefinierte

SASS -Sprache enthält eine große Anzahl von Funktionen, einschließlich Variablen, Verschachtelung, Teilen, Mischen usw. Aber es gibt einige Nachteile:

1. Sie können nicht einfach neue Funktionen hinzufügen.
   Möglicherweise möchten Sie die Möglichkeit haben, HSLA -Farben in RGB umzuwandeln. Das Schreiben von benutzerdefinierten Funktionen kann möglich sein, aber andere Anforderungen sind unmöglich - beispielsweise Inline -SVG als Hintergrundbild.

2. Sie können den Funktionssatz nicht einfach einschränken.
   Sie können es vorziehen, dass Ihr Team keine Verschachtelung oder @extend verwendet. Lint -Regeln helfen, aber sie verhindern nicht, dass Sass gültige .SCSS -Dateien kompiliert.

postCSS ist einfacher zu konfigurieren.

postcss selbst tut nichts. Verarbeitungsfunktionen erfordern ein oder mehrere verfügbare Plugins. Die meisten Plugins führen eine einzige Aufgabe aus. Wenn Sie also keine Verschachtung benötigen, fügen Sie keine verschachtelten Plugins hinzu. Bei Bedarf können Sie Ihr eigenes Plug-In über das Standard-JavaScript-Modul schreiben, das die Funktionen von node.js.

postcss

installieren

postCSS können mit Webpack-, Paket-, Gulp.js- und anderen Build -Tools verwendet werden. Dieses Tutorial zeigt jedoch, wie man es aus der Befehlszeile ausführt.

Verwenden Sie bei Bedarf NPM Init, um ein neues Node.js -Projekt zu initialisieren. Richten Sie PostCSS ein, indem Sie die folgenden Module installieren, um eine grundlegende .scss-Parsen mithilfe von Plugins für teilweise, variable, mixe, nest und automatisch-prefix durchzuführen:

<code>npm run css:build</code>

Wie beim Beispielprojekt werden Postcss und seine Plugins lokal installiert. Dies ist eine praktische Option, wenn Ihr Projekt möglicherweise unterschiedliche Kompilierungsanforderungen hat.

Hinweis: Postcs kann nur aus JavaScript-Dateien ausgeführt werden, aber das Postcss-Cli-Modul bietet einen Wrapper, der aus der Befehlszeile aufgerufen werden kann. Das Postcss-SCSS-Modul ermöglicht das Lesen von POSTCSS .Scss-Dateien, konvertiert sie jedoch nicht.

Autoprefixer -Konfiguration

autoprefixer verwendet Browserslist, um zu bestimmen, welche Anbieter -Präfixe basierend auf der Liste der von Ihnen unterstützten Browser benötigt werden. Der einfachste Weg ist es, es als "Browserlist" -Array in package.json zu definieren. Das folgende Beispiel fügt ein Anbieter -Präfix hinzu, wenn ein Browser mindestens 2% des Marktanteils hat:

<code>npm run css:dev</code>

Ihr erstes Build

Sie haben normalerweise eine einzelne Root -Sass -.Scss -Datei, in der alle erforderlichen Teil-/Komponentendateien importiert werden. Zum Beispiel:

<code>npm run css:watch</code>

Kompilierung kann durch Ausführen von NPX -Postcss, gefolgt von Eingabedateien, Ausgabedateien und erforderlichen Optionen initiiert werden. Zum Beispiel:

<code>npm run css:build</code>

Dieser Befehl:

1. Analyse./Src/Scss/main.scss
2. Ausgabe von ./build/css/main.css
3. node_env Umgebungsvariable für Entwicklung
setzen
externe Quellkartendatei
5. ausgeben
6. detaillierte Ausgabe und Fehlermeldung
festlegen
7. Stellen Sie den Postcss-SCSS-Sass-Parser und
fest

Verwenden Sie Plugins postcss-advanced-variablen, postcss-nestiert und autoprefixer, um Teile, Variablen, Mischen, Nisten und Autoprefixer

zu verarbeiten

Alternativ können Sie addieren, um beim Ändern der .scss -Datei automatisch zu kompilieren.

postCSS -Konfigurationsdatei

erstellen

Für längere Plugin -Listen kann die Befehlszeile schnell schwer zu handhaben sein. Sie können es als NPM -Skript definieren, aber die POSTCSS -Konfigurationsdatei ist eine einfachere Option, die andere Möglichkeiten bietet.

<code>npm install -g sass</code>

postCSS -Konfigurationsdatei ist eine JavaScript -Moduldatei mit dem Namen postcss.config.js, die normalerweise im Stammverzeichnis des Projekts gespeichert ist (oder in welchem ​​Verzeichnis, aus dem Sie Postcs ausführen). Das Modul muss eine einzelne Funktion exportieren:

<code>sass [input.scss] [output.css]</code>

Es gibt ein CFG -Objekt mit Eigenschaften, die vom Postcss -Befehl festgelegt wurden. Zum Beispiel:

<code>npm install --save-dev postcss postcss-cli postcss-scss postcss-advanced-variables postcss-nested autoprefixer</code>

Sie können diese Eigenschaften überprüfen und entsprechend reagieren - zum Beispiel, um festzustellen, ob Sie im Entwicklungsmodus ausgeführt werden und ob Sie die .scss -Eingabedatei verarbeiten:

<code>"browserslist": [
  "> 2%"
],</code>

Die Funktion muss ein Objekt zurückgeben, dessen Eigenschaftsname mit der Option POSTCSS-CLI übereinstimmt. Die folgende Konfigurationsdatei kopiert den oben verwendeten Long Quick Start -Befehl:

<code>// 根Sass文件
// src/scss/main.scss
@import '_variables';
@import '_reset';
@import 'components/_card';
// 等。</code>

Sie können jetzt Postcss mit kürzeren Befehlen ausführen:

• Folgendes sind einige Dinge zu beachten:
-wörtlich ist optional: Es ist nicht in postcs.config.js festgelegt.
SASS -Syntax -Parsen wird nur angewendet, wenn die Eingabe eine .Scss -Datei ist. Andernfalls ist es standardmäßig Standard -CSS.
Die Quellkarte wird nur ausgegeben, wenn -Env auf die Entwicklung eingestellt ist.

Sie können immer noch hinzufügen -sehen Sie eine automatische Zusammenstellung.

Wenn Sie es vorziehen, postcs.config.js in ein anderes Verzeichnis zu setzen, können Sie es mit der Option - -config -z. B. -config /mycfg /verweisen. Im Beispielprojekt befindet sich die obige Konfiguration in config/postcs.config.js. Es wird verwiesen, indem NPM Run CSS: Basic ausgeführt wird, das aufgerufen wird:

<code>npm run css:dev</code>

Fügen Sie weitere Plugins

hinzu

Der folgende Abschnitt enthält einige Beispiele für POSTCSS -Plugins, die zusätzliche .scSS -Syntax analysieren oder Verarbeitungsfunktionen über den Umfang des SASS -Compilers hinaus liefern.

Verwenden von Design -Token

Design-Token sind eine technologischunabhängige Möglichkeit, Variablen wie unternehmensweite Schriftarten, Farben, Abstand usw. zu speichern. Sie können das Token-Name-Wert-Paar in einer JSON-Datei speichern:

<code>npm run css:watch</code>

Verweisen Sie sie dann in Web-, Windows-, MacOS-, iOS-, Linux-, Android- oder anderen Anwendungen.

SASS unterstützt keine direkten Design-Token, sondern JavaScript-Objekte mit Variablen-Attributen (die Namenswertpaare enthalten) an vorhandene Postcss-Advanced-Variablen-Postcss-Plugin übergeben werden:

<code>npm run css:build</code>

Das Plugin wandelt alle Werte in globale SASS $ -Variablen um, die in jedem Teil verwendet werden können. Der Fallback -Wert kann festgelegt werden, um sicherzustellen, dass die Variable auch dann verfügbar ist, wenn sie im Token fehlt. Zum Beispiel:

<code>npm install -g sass</code>

Die Token -Variable kann dann in jeder .scss -Datei verwiesen werden. Zum Beispiel:

<code>sass [input.scss] [output.css]</code>

Im Beispielprojekt wird eine token.json -Datei definiert, die geladen und verwendet wird, wenn NPM ausgeführt wird. CSS: Dev.

Sass Map Support

hinzufügen

Sass Map ist ein Schlüsselwertobjekt. Die MAP-GET-Funktion kann Werte nach Namen finden.

Das folgende Beispiel definiert einen Medienabfrage -Haltepunkt als SASS -Karte und verwendet ein Antwortmixin, um den benannten Wert zu erhalten:

<code>npm install --save-dev postcss postcss-cli postcss-scss postcss-advanced-variables postcss-nested autoprefixer</code>

Die Standardeigenschaften und Medienabfragenänderungen können dann im selben Selektor definiert werden. Zum Beispiel:

<code>"browserslist": [
  "> 2%"
],</code>

kompiliert mit CSS:

<code>// 根Sass文件
// src/scss/main.scss
@import '_variables';
@import '_reset';
@import 'components/_card';
// 等。</code>

postcss-MAP-Get-Plugin fügt die Sass Map-Verarbeitung hinzu. Installieren Sie es mit dem folgenden Befehl:

<code>npx postcss ./src/scss/main.scss \
    --output ./build/css/main.css \
    --env development \
    --map \
    --verbose \
    --parser postcss-scss \
    --use postcss-advanced-variables postcss-nested autoprefixer</code>

Fügen Sie es dann zu postcs.config.js:

hinzu

<code>// postcss.config.js
module.exports = cfg => {

  // ... 配置 ...

};</code>

Medienabfrageoptimierung

hinzufügen

Da wir Medienabfragen hinzugefügt haben, wird es nützlich sein, sie zu kombinieren und in mobilen Prioritäten zu sortieren. Zum Beispiel das folgende CSS:

<code>{
  cwd: '/home/name/postcss-demo',
  env: 'development',
  options: {
    map: undefined,
    parser: undefined,
    syntax: undefined,
    stringifier: undefined
  },
  file: {
    dirname: '/home/name/postcss-demo/src/scss',
    basename: 'main.scss',
    extname: '.scss'
  }
}</code>

kann zusammengeführt werden in:

<code>// postcss.config.js
module.exports = cfg => {

  const
    dev = cfg.env === 'development',
    scss = cfg.file.extname === '.scss';

  // ... 配置 ...

};</code>

Dies ist in SASS nicht möglich, kann jedoch mit dem Postcss POSTCSS-SORT-Media-Queries-Plugin implementiert werden. Installieren Sie es mit dem folgenden Befehl:

<code>// postcss.config.js
module.exports = cfg => {

  const
    dev = cfg.env === 'development',
    scss = cfg.file.extname === '.scss';

  return {

    map: dev ? { inline: false } : false,
    parser:  scss ? 'postcss-scss' : false,
    plugins: [
      require('postcss-advanced-variables')(),
      require('postcss-nested')(),
      require('autoprefixer')()
    ]

  };

};</code>

Fügen Sie es dann zu postcs.config.js:

hinzu

<code>npx postcss ./src/scss/main.scss \
    --output ./build/css/main.css \
    --env development \
    --verbose</code>

Asset Processing

hinzufügen

Asset Management ist nicht in SASS bereitgestellt, aber Postcss-Assets machen es einfach. Das Plugin analysiert die CSS -Bild -URL, fügt Cache -Löschen hinzu, definiert die Bildgröße und findet die Datei mithilfe der Base64 -Notation ein. Zum Beispiel:

<code>npx postcss src/scss/main.scss \
    --output build/css/main.css \
    --env development \
    --verbose \
    --config ./config/</code>

kompiliert als:

<code>{

  "font-size": "16px",

  "font-main": "Roboto, Oxygen-Sans, Ubuntu, sans-serif",
  "lineheight": 1.5,

  "font-code": "Menlo, Consolas, Monaco, monospace",
  "lineheight-code": 1.2,

  "color-back": "#f5f5f5",
  "color-fore": "#444"

}</code>

Verwenden Sie den folgenden Befehl, um das Plug-In zu installieren:

<code>// PostCSS配置
module.exports = cfg => {

  // 将令牌导入为Sass变量
  const variables = require('./tokens.json'); // 新的

  const
    dev = cfg.env === 'development',
    scss = cfg.file.extname === '.scss';

  return {

    map: dev ? { inline: false } : false,
    parser:  scss ? 'postcss-scss' : false,
    plugins: [
      require('postcss-advanced-variables')({ variables }), // 已更新
      require('postcss-nested')(),
      require('autoprefixer')()
    ]

  };

};</code>

Fügen Sie es dann zu postcs.config.js hinzu. In diesem Fall wird das Plugin angewiesen, Bilder im SRC/ Images/ Verzeichnis zu suchen:

<code>// 如果tokens.json中未设置“color-back”值，则将默认背景颜色设置为#FFF
$color-back: #fff !default;</code>

Komprimierung

hinzufügen

CSSNANO legt den Standard für die CSS -Komprimierung fest. Eine Komprimierung erfordert möglicherweise mehr Verarbeitungszeit als andere Plugins und kann daher nur in der Produktion angewendet werden.

CSSNANO mit dem folgenden Befehl installieren:

<code>body {
  font-family: $font-main;
  font-size: $font-size;
  line-height: $lineheight;
  color: $color-fore;
  background-color: $color-back;
}</code>

Fügen Sie es dann zu postcs.config.js hinzu. In diesem Fall wird die Komprimierung nur ausgeführt, wenn node_env auf etwas anderes als Entwicklung eingestellt ist:

<code>npm run css:dev</code>

Einstellung -Die Produktion löst die Komprimierung aus (und entfernt die Quellkarte):

<code>npm run css:watch</code>

Im Beispielprojekt können Produktions -CSS durch Ausführen von NPM Run CSS: Build zusammengestellt werden.

migrieren zu postcss?

postCSS ist ein leistungsstarkes und konfigurierbares Tool, mit dem .SCSS -Dateien kompilieren und die Standard -Sass -Sprache verbessern (oder begrenzen) können. Wenn Sie bereits POSTCS für Autoprefixer verwenden, können Sie den Sass -Compiler vollständig entfernen, während Sie Ihre Lieblingssyntax beibehalten.

Weitere Links:

• Sass Sprachreferenz
• Postcss -Homepage
• postCSS -Pluginliste
• Durchsuchbares Verzeichnis für das Postcss-Plug-In
• Postcss -Plugin auf npmjs.com
• Postcss -Plugin
schreiben
• postcss cli

häufig gestellte Fragen zu Postcss

Was ist Postcss? POSTCSS ist ein Werkzeug zum Konvertieren von Stilen mithilfe von JavaScript -Plugin. Es wird häufig in der Webentwicklung verwendet und verwendet verschiedene Plugins, um CSS zu verarbeiten, um die Funktionalität von Standard -CSS zu verbessern und zu erweitern.

Wie unterscheidet sich Postcss von herkömmlichen CSS -Präprozessoren wie Sass oder weniger? Im Gegensatz zu herkömmlichen Präprozessoren ist PostCSS selbst kein Präprozessor, sondern ein Werkzeug, das Plug-Ins verwendet, um CSS zu konvertieren. Es ermöglicht Entwicklern, modulare und anpassbare Methoden zu verwenden, indem nur die für ein bestimmtes Projekt benötigten Plugins ausgewählt werden.

Was sind einige übliche Anwendungsfälle für Postcss? POSTCSS wird normalerweise für Aufgaben wie automatisches Präfix, Codeüberprüfung, Komprimierung, variabler Austausch und zukünftige Kompatibilität der CSS -Syntax verwendet. Es bietet ein flexibles und modulares System zur Verbesserung der Funktionalität von Standard -CSS.

Wie installiere und richte ich PostCS für mein Projekt ein und richten Sie ein? Sie können NPM (Node Package Manager) verwenden, um PostCS und seine Plugins zu installieren. Nach der Installation müssen Sie eine Konfigurationsdatei (normalerweise als postcs.config.js bezeichnet) erstellen, um das Plugin für das Projekt und seine Einstellungen zu definieren.

Was ist ein automatisches Präfix und warum ist er in Postcss nützlich? Das automatische Präfix ist ein Prozess, bei dem PostCSS automatisch Anbieter -Präfixe zu CSS -Eigenschaften hinzufügt, um die Kompatibilität mit verschiedenen Browsern sicherzustellen. Dies hilft Entwicklern, saubereren Code zu schreiben, wodurch manuelle Lieferantenspezifische Präfixe vermeiden.

Kann ich Postcss mit Präprozessoren wie Sass oder weniger verwenden? Ja, Postcss können mit Präprozessoren wie Sass oder weniger verwendet werden. Sie können beide nutzen, indem Sie die Ausgabe des Präprozessors weiter verarbeiten, indem Sie das Postcss -Plugin verwenden.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie PostCSS als konfigurierbare Alternative zu SASS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!