Heim  >  Artikel  >  Web-Frontend  >  Was ist PostCSS? Warum es verwenden?

Was ist PostCSS? Warum es verwenden?

藏色散人
藏色散人nach vorne
2021-10-20 16:16:568553Durchsuche

Warum Postcss verwenden

Mit der Entwicklung der Technologie hat sich CSS nun zur dritten Stufe entwickelt. CSS3.css3 kann dynamischere Effekte unterstützen. In der Vergangenheit mussten Animation, Übergang, Berechnung und andere Funktionen mit js implementiert werden Heutzutage können die meisten davon mit CSS implementiert werden und die Leistung ist besser. Natürlich sind beim Schreiben von CSS mit den Anforderungen von Unternehmen CSS-Frameworks wie Sass entstanden, um CSS die Wiederverwendbarkeit, Flexibilität, modulare Entwicklung und eine bessere Verwaltung von Stildateien zu ermöglichen.

CSS-Präprozessor Sass

Sass kann einige Mängel von CSS beheben, einschließlich, aber nicht beschränkt auf:

1. Variable: Deklarieren Sie eine Variable und verwenden Sie sie an mehreren Stellen

$content: "Non-null content";
.main {
 content: $content;
}
编译为
.main {
 content: "Non-null content”;
}

2. Verschachtelung: Kann Eltern und besser klären untergeordnete hierarchische Beziehung, einfach zu ändern und zu suchen und Stilnamen zu reduzieren

.main {

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }

}
kompiliert in
.main .redbox {

    background-color: #ff0000;
    color: #000000;

}

3. Referenz gemischte Stile: an einer Stelle definiert, verwendet in mehrere Orte

Vorher kompiliert:

@mixin clearfix {
 display: inline-block;
 &:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
}
.box{
@include clearfix
}

4. Funktionsanweisungen: Beginnen Sie mit der Programmierung wie js

.box{
display: inline-block;
}
.box:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

Weitere Informationen zur Verwendung finden Sie auf der offiziellen Sass-Website mehr.

Mit dem CSS-Präprozessor können Front-End-Entwickler die Geschwindigkeit der CSS-Entwicklung erheblich verbessern. Ähnlich wie bei Sass gibt es weniger und Stylus.

Lassen Sie uns über einige Probleme sprechen, die bei der Verwendung von Sass auftreten.

1 Basierend auf Ruby müssen Sie Ruby installieren, um Sass verwenden zu können. Es wird intern mit Ruby kompiliert.

2. Sie müssen Node-Sass installieren. Wenn Sie Sass verwenden, muss der Webpack-Build installiert werden, und Sass-Loader hängt von Node-Sass ab Sie müssen wissen, dass die Installationsgeschwindigkeit von Node-Sass extrem langsam ist, insbesondere bei der Entwicklung mit dem Windows-System. Wenn npm

3. Kontamination globaler Variablen, wenn Sie einen Selektor definieren, müssen Sie berücksichtigen, ob an anderen Stellen derselbe Name verwendet wird.

4. Statische Kompilierung: Die angezeigte Seite ist das kompilierte CSS.

4. Derzeit im CSS3-Stadium lohnt es sich, auf die zukünftige Entwicklungsrichtung von CSS zu blicken. In Zukunft wird CSS weitere Attribute und Funktionen unterstützen, einschließlich Variablen, Verschachtelung, Wertberechnungen usw.

postcss neue Revolution

postcss-Definition:

PostCSS ist ein Tool zum Transformieren von CSS mit JS-Plugins. Diese Plugins können Variablen und Mixins unterstützen, zukünftige CSS-Syntax, Inline-Bilder und mehr transpilieren.

postcss Vorteile

:1. Unterstützt zukünftiges CSS: Verwenden Sie CSSnext, um zukünftiges CSS zu schreiben (Postcss-CSSnext-Plugin)

$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
 @return $n * $grid-width + ($n - 1) * $gutter-width;
}
.sidebar { width: grid-width(5); }
编译为
.sidebar { width: 240px; }

Durch CSSnext wird der obige Code in den folgenden Inhalt verarbeitet

:root {
 --heading-color: #ff0000;
}
/ custom selectors /
@custom-selector :--headings h1, h2, h3, h4, h5, h6;
/ usage /
:--headings {
 color: var(--heading-color);
}

2 . PostCSS soll 3-30x schneller sein als Präprozessoren.

3. Umfangreiches Plug-in-System, freie Hände.

4.css ist modular und beschränkt den Umfang auf Komponenten, wodurch das Problem des globalen Umfangs vermieden wird.

Postcss ist ein CSS-Postprozessor und kompiliert CSS dynamisch Vorgang beim Kompilieren.

Postcss selbst hat keinen Einfluss auf Ihr CSS. Zusammen mit der Postcss-Ökologie werden weitere Postcss-Plugins abgeleitet, die Ihnen bei Bedarf bei der Lösung von mehr als 95 % der CSS-Fragen helfen können Um eine CSS-Schreibspezifikation anzupassen, die zu Ihren eigenen Geschäftsanforderungen gehört, können Sie dafür auch ein spezielles PostCSS-Plugin entwickeln. Loader postcss-cssnext -D


webpack.config.js

postcss插件参考

  • Postcss-Module und React-CSS-Module isolieren automatisch Selektoren innerhalb von Komponenten.
  • postcss-autoreset ist eine Alternative zur Verwendung eines globalen Resets, die für isolierbare Komponenten besser ist.
  • postcss-initial fügt hinzu all: anfängliche Unterstützung, die alle geerbten Stile zurücksetzt.
  • autoprefixer fügt Herstellerpräfixe hinzu und verwendet dabei Daten von Can I Use.
  • postcss-preset-env ermöglicht Ihnen die heutige Nutzung zukünftiger CSS-Funktionen.
  • precss enthält Plugins für Sass-like Funktionen wie Variablen, Verschachtelung und Mixins.
  • postcss-assets fügt Bildabmessungen ein und inline Dateien.
  • postcss-sprites generiert Bild-Sprites.
  • postcss-inline-svg ermöglicht es Ihnen, SVG zu inline und seine Stile anzupassen.
  • Mit postcss-write-svg können Sie einfache SVG-Dateien direkt in Ihr CSS schreiben.
  • postcss-syntax wechselt die Syntax automatisch durch Dateierweiterungen.
  • postcss-html-Parsing-Stile in c9ccee2e6ea535a969eb3f532ad9fe89 Tags von HTML-ähnlichen Dateien.
  • postcss-markdown-Parsing-Stile in Codeblöcken von Markdown-Dateien.
  • postcss-jsx-parsing-CSS in Vorlagen-/Objektliteralen von Quelldateien.
  • postcss-styled-parsendes CSS in Vorlagenliteralen von Quelldateien .
  • postcss-scss ermöglicht Ihnen die Arbeit mit SCSS (kompiliert SCSS jedoch nicht zu CSS).
  • postcss-sass ermöglicht Ihnen die Arbeit mit Sass (kompiliert Sass jedoch nicht zu CSS).
  • postcss-less ermöglicht Ihnen um mit Less zu arbeiten (aber kompiliert LESS nicht zu CSS).
  • postcss-less-engine ermöglicht Ihnen, mit Less zu arbeiten (und kompiliert LESS zu CSS mithilfe der echten Less.js-Auswertung).
  • postcss-js ermöglicht Ihnen dies Schreiben Sie Stile in JS oder transformieren Sie React Inline Styles, Radium oder JSS.
  • postcss-safe-parser findet und behebt CSS-Syntaxfehler.
  • postcss-will-change Dieses Plugin nutzt Backface-Sichtbarkeit, um den Browser zu zwingen, eine neue Ebene zu erstellen , ohne vorhandene Eigenschaften für die Sichtbarkeit der Rückseite zu überschreiben

Das obige ist der detaillierte Inhalt vonWas ist PostCSS? Warum es verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen