CSS nach und vor der Verarbeitung

Hallo Leser. Haben Sie auf Ihrem Weg zum Lernen von Layouts CSS gelernt und möchten weitermachen? Dann zu dir unter Katze. Achtung, viel Code.

In diesem Artikel werde ich Präprozessoren und Postprozessoren überprüfen.

Ich werde nicht auf Details zu CSS eingehen, was bedeutet, dass Sie es bereits wissen. Ich werde Klassen in BEM- Notation benennen. Ich werde mich auch nicht mit der Installation und Konfiguration von allem befassen, worüber ich schreiben werde, aber ich werde trotzdem Links hinterlassen, denen Sie folgen können, und lernen, wie man es selbst macht.

Beginnen wir mit den Präprozessoren.

Präprozessoren

Was ist ein Präprozessor außerhalb des Kontexts mit CSS? Vicki kennt die Antwort.

Was ist ein Präprozessor im Kontext von CSS? In unserem Fall ist der Präprozessor ein Programm, das Code in der Sprache des Präprozessors als Eingabe empfängt, und bei der Ausgabe erhalten wir CSS, das wir in unseren Browser eingeben können.

Was sind die Präprozessoren? Es gibt mehrere Vertreter, zum Beispiel: Sass (.sass, .scss), Less (.less) und Stylys (.stylus).
Auch unter den Präprozessoren kann PostCSS (oder besser gesagt der SugarSS-Parser und das PreCSS-Plugin) separat herausgegriffen werden. Mit Blick auf die Zukunft werde ich sagen, dass PostCSS nicht nur ein Postprozessor ist.

Ich werde das Beispiel von Sass überprüfen. Genauer gesagt zu seiner neuen Syntax - SCSS, da es näher an CSS liegt als die alte Syntax. Beginnen wir mit den Funktionen, die Präprozessoren hinzufügen, die nicht in CSS enthalten sind, und enden mit den Problemen, die gelöst werden.

Die Möglichkeiten

Variablen

//style.scss $color: #fff; span { color: $color; background: $color; } //style.css span { color: #fff; background: #fff; } 

Der Nutzen von Variablen ist schwer zu überschätzen. Jetzt können Sie Farben ($omato: rgb (255,99,71)) aussagekräftige Namen geben, Werte nicht durch Konstanten, sondern durch Variablen (Höhe: $ body_height - $ footer_height) berechnen und vieles mehr. Viele mögen argumentieren, dass es in CSS Variablen gibt. Aber Can I Use sagt, dass es keine Unterstützung für IE gibt (und aus offensichtlichen Gründen wird dies nicht erwartet).

Nisten

 //style.scss .chat-area { width: 40%; &__button { // & -    (   & = .chat-area) display: inline-block; height:36px; width: 10px; } a { color: red; } } //style.css .chat-area { width: 40%; } .chat-area__button { display: inline-block; height:36px; width: 10px; } .chat-area a { color: red; } 

Am Anfang des Artikels habe ich mich auf BEM bezogen. In diesem Beispiel ist das Element mit der Chat-Bereichsklasse ein Block. Falls es plötzlich umbenannt werden muss, ist es jetzt möglich, dies an einer Stelle zu tun. Dies wird zur Routine, wenn mehrere Dutzend Selektoren in eine Datei eingegeben werden, die den Namen des Blocks enthält. Ich möchte auch darauf hinweisen, dass dies eine Art Schutz gegen Tippfehler ist, da der Name des Blocks einmal geschrieben wird.

Mixins

 //style.scss @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); } //style.css .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } 

Mixins sind eines der am schwierigsten zu verstehenden Themen. Grob gesagt ist ein Mixin eine Funktion, die Argumente akzeptiert und Regeln, die von diesen Argumenten abhängen, auf einen bestimmten Selektor anwendet. In diesem Beispiel wurde das Rand-Radius-Mixin auf den .box-Selektor angewendet

Zusätzliche Funktionen

 //style.scss $color: #202020; h1, h2 { color: lighten($color, 40%); } //style.css h1, h2 { color: #868686; } 

Grundsätzlich erleichtern neue Funktionen das Arbeiten mit Farben. Zum Beispiel die Aufhellungsfunktion - hellt die Farbe um die angegebene Anzahl von Prozent auf (das Gegenteil ist die Verdunkelungsfunktion).

Probleme gelöst

Modularität

Das Problem beim Standardimport besteht darin, dass eine zusätzliche Anforderung an den Server erstellt wird, was eine teure Operation ist. Es wäre schön, wenn der Import sofort den gesamten Text des Importierten in die Quelldatei einfügen würde, oder?

Auf die eine oder andere Weise gab es vorher keine Präprozessoren, und das Problem musste irgendwie gelöst werden. Sie können beispielsweise den gesamten Code in eine Datei schreiben.


Wir haben jedoch Präprozessoren, die dieses Problem für uns lösen. Der Präprozessor überschreibt den Standardimport und fügt nun, anstatt nach dem Server zu fragen, den Import wie gewünscht in die Quelldatei ein.

 //style.scss @import "selector1"; @import "selector2"; //selector1.scss span { color: white; } //selector2.scss div { color: gold; } //style.css div { color: gold; } span { color: white; } 

Bitte beachten Sie, dass die Quelldateien in eine konvertiert wurden. Eine Anfrage an den Server für Statik - eine Antwort.

Vererbung

<Sarkasmus> Wir haben Klassen, aber keine Vererbung, wie? </ Sarkasmus>. Jetzt ist es möglich, die sogenannten "Template-Selektoren" auszuwählen und mit anderen Selektoren zu erweitern.

 // style.scss %equal-heights { //   height: 100%; } %message { //   padding: 10px; } .success { @extend %message; color: green; } .error { @extend %message; color: red; } // style.css .success, .error { padding: 10px; } .success { color: green; } .error { color: red; } 

Das Schöne an Vorlagen-Selektoren ist, dass sie nicht in die generierten Stile passen. Der Template Equalizer% Equal-Heights war nicht am Code beteiligt und hinterließ keine Spuren in CSS. Die Selector% -Nachricht wurde in Form von Regeln für Selektoren wiedergegeben, die sie erweitert haben. Sie können von normalen Selektoren erben, es ist jedoch vorzuziehen, Vorlagen-Selektoren zu verwenden, damit kein übermäßiger Müll entsteht.

Formatierung

Nachdem der Code geschrieben wurde, muss er formatiert (für die Produktion komprimiert) werden. Sie können dies mit Hilfe von Sammlern wie Webpack oder mit Standardwerkzeugen tun.

Es gibt 4 Arten der Formatierung in Sass.

 //expanded span { color: gold; display: block; } div { color: red; } //nested span { color: gold; display: block; } div { color: red; } //compact span { color: gold; display: block; } div { color: red; } //compressed span{color:gold;display:block}div{color:red} 

erweitert - Am ähnlichsten zu von Menschen geschriebenem Code.
verschachtelt - Annäherung an das Format der alten Syntax. Die Lesbarkeit geht nicht verloren, aber es handelt sich um ein Hollywood-Problem.
kompakt - Beibehaltung der Lesbarkeit, jedoch mit Schwierigkeiten. Nützlich, um die Anzahl der Selektoren in einem Projekt per Auge zu bestimmen.
komprimiert - Bereits völlig unlesbares Format. Alle Zeichen, die gelöscht werden können, werden gelöscht. Geeignet zum Füttern des Browsers.

Nachtrag

Ich habe einige der von Sass hinzugefügten Funktionen nicht verstanden. Zum Beispiel Schleifen oder Merkmale von arithmetischen Operatoren . Ich überlasse es Ihnen, sich mit Ihnen vertraut zu machen.

Postprozessoren

Nachdem wir uns mit Präprozessoren befasst haben, wechseln wir zu Postprozessoren.

Im Kontext von Css ist der Postprozessor im Wesentlichen derselbe wie der Präprozessor, aber die Eingabe in den Postprozessor erhält keinen Code, der in der Sprache des Präprozessors geschrieben ist, sondern auch CSS. Das heißt, der Postprozessor ist ein Programm, an dessen Eingabe CSS angegeben ist, und die Ausgabe ist CSS. Es ist nicht sehr klar, warum dies notwendig ist.

Ich werde anhand eines konkreten Beispiels die Funktionsweise von PostCSS erläutern - dem einzigen Vertreter von Postprozessoren im Kontext von CSS.

PostCSS out of the box macht mit CSS eigentlich nichts. Es gibt einfach die Datei zurück, die ihm bei der Eingabe übergeben wurde. Änderungen beginnen, wenn Plugins mit PostCSS verbunden sind.

Der gesamte Zyklus von PostCSS kann wie folgt beschrieben werden:

• Die Quelldatei wird an die PostCSS-Eingabe übergeben und analysiert.
• Plugin 1 macht etwas
• ...
• Plugin n macht etwas
• Das Ergebnis wird in eine Zeichenfolge konvertiert und in die Ausgabedatei geschrieben.

Betrachten Sie die wichtigsten Plugins im PostCSS-Ökosystem

Plugins

Autoprefixer

Dieses Plugin ist so beliebt, dass viele Leute denken, dass sie dieses Plugin verwenden, aber kein PostCSS verwenden. Sie sind falsch.

 //in.css div { display: flex } //out.css div { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex } 

Autoprefixer fügt Ihren Regeln Browserpräfixe hinzu. Eines der wichtigsten Plugins, mit dem die Geschichte von PostCSS begann und das nicht ersetzt werden konnte. Man könnte sogar sagen, dass es sinnvoll ist, PostCss nur für dieses Plugin zu verwenden.

Preset env

 //in.css @custom-media --med (width <= 50rem); @media (--med) { a:hover { color: color-mod(black alpha(54%)); } } //out.css @media (max-width: 50rem) { a:hover { color: rgba(0, 0, 0, 0.54); } } 

PostCSS Preset Env fügt Funktionen hinzu, die nur in Entwürfen von CSS-Entwicklern behandelt werden. In diesem Beispiel wurde die @ custom-media-Direktive sowie die Color-Mod-Funktion implementiert. Nutzen Sie noch heute das CSS der Zukunft!

CSS-Module

Alle diese BEMs sind nichts für Sie, aber gibt es immer noch ein Problem mit Klassennamenkonflikten? Dann bietet PostCSS eine andere Lösung.

 //in.css .name { color: gray; } //out.css .Logo__name__SVK0g { color: gray; } 

CSS-Module ändern Klassennamen nach einem bestimmten Muster (alles ist anpassbar). Jetzt kennen wir den Namen der Klasse nicht im Voraus, da er dynamisch bestimmt wird. Wie klassifiziere ich jetzt Elemente, wenn wir sie nicht im Voraus kennen? Durch die Kombination von PostCSS, Webpack und ES6 kann ich folgende Lösung anbieten:

 import './style.css'; //  import styles from './style.css'; //  

Jetzt importieren wir nicht nur eine Datei mit Stilen (z. B. in der React-Datei einer Komponente) und ersetzen uns zuvor bekannte Werte, sondern importieren ein Objekt. Die Schlüssel dieses Objekts sind die ursprünglichen Selektoren, und die Werte werden konvertiert. Das heißt, in diesem Beispiel ist styles ['name'] = 'Logo__name__SVK0g'.

Kurz

 //in.css .icon { size: 48px; } .canvas { color: #abccfc #212231; } //out.css .icon { width: 48px; height: 48px; } .canvas { color: #abccfc; background-color: #212231; } 

PostCSS Short fügt eine Reihe verkürzter Einträge für verschiedene Regeln hinzu. Der Code wird kürzer und daher gibt es weniger Raum für Fehler. Plus erhöht die Lesbarkeit.

Auto-Reset

 //in.css div { margin: 10px; } a { color: blue; } //out.css div, a { all: initial; } div { margin: 10px; } a { color: blue; } 

Mit PostCSS Auto Reset können wir keine separate Datei mit einem Reset aller Stile erstellen. Das Plugin erstellt einen großen Selektor für alle Selektoren, in dem die Regeln platziert und alle Stile zurückgesetzt werden. Standardmäßig wird nur die Regel all mit dem Wert initial erstellt. Dies ist nützlich in Kombination mit dem Postcss-Initial- Plugin, das diese Regel wiederum in eine Regentasche für 4 Bildschirme verwandelt. Es kann jedoch alles wie folgt konfiguriert und zurückgesetzt werden:

 //out.css div, a { margin: 0; padding: 0; } div { margin: 10px; } a { color: blue; } 

Erinnern Sie sich am Anfang des Artikels, dass PostCSS nicht nur ein Postprozessor ist?

PostCSS - Präprozessor?

Betrachten Sie einen Parser und ein Plugin. Danach ändern Sie Ihre aktuelle Meinung zu PostCSS.

Sugararss

 //in.sss .parent color: white .parent > .child color: black //out.css .parent { color: white } .parent > .child { color: black } 

SugarSS ist ein Parser (kein Plugin!), Der standardmäßig auf Einrückungen und nicht auf geschweiften Klammern basiert. Es hat eine separate Erweiterung ".sss". Mit SugarSS geschriebener Code ähnelt im Stil der alten Sass-Syntax, jedoch ohne Lotionen wie Variablen, Mixins, Vererbung usw.

Sie haben erraten, was das nächste Plugin hinzufügen wird?

Precss

 //in.sss $color: black .parent .child color: $color //  SugarSS $color: black; .parent { .child { color: $color } } //out.css .parent .child { color: black } 

PreCSS fügt lediglich die Funktionen der Präprozessoren hinzu, über die in der ersten Hälfte des Artikels geschrieben wurde.

Und warum ist PostCSS jetzt kein Präprozessor?

Stylelint

Über Stylelint wurde bereits viel geschrieben . Er nahm an dieser Überprüfung teil, weil er PostCSS als Parser für Zeilen von CSS-Dateien verwendet. Angenommen, wir haben eine solche Datei.

 a { color: rgb(1, 1, 1) } div { color: rgb(0, 0, 0) } 

Hier ist die Ausgabe für die aktuelle Datei:

  2:21 Expected a trailing semicolon declaration-block-trailing-semicolon 6:21 Expected a trailing semicolon declaration-block-trailing-semicolon 7:1 Unexpected missing end-of-source newline no-missing-end-of-source-newline 

Der Nutzen dieses Tools ist schwer zu überschätzen.

Schlussfolgerungen

Präprozessoren fügen viele neue Funktionen hinzu, die nicht in CSS enthalten sind. Sobald Sie es versuchen, werden Sie kaum wieder zu normalem CSS zurückkehren.

PostCSS ist dem ursprünglichen CSS viel näher als Präprozessoren, kann jedoch mit bestimmten angeschlossenen Plugins dieselbe Funktionalität (und sogar eine ähnliche Syntax) aufweisen. Anfänger können setzen, ohne zu denken, dass Layouts nicht in reinem CSS sind. Einige Plugins (zum Beispiel Autoprefixer) haben keine Analoga in der Präprozessorwelt.

Niemand stört die Verwendung von Präprozessoren und PostCSS in Verbindung. Die Option ist ziemlich gut für Projekte, die bereits Präprozessoren verwenden und einen Wohnort haben.

Für neue Projekte würde ich empfehlen, nur PostCSS zu verwenden. Layout-Designer sind an die Präprozessorsyntax gewöhnt? Installieren Sie das PreCSS-Plugin und den SugarSS-Parser. Benötigen Sie Cross-Browser-Kompatibilität? Installieren Sie das Autoprefixer-Plugin. Browserübergreifende Kompatibilität ist nicht mehr erforderlich (z. B. wurde Ihr Projekt in ein Elektron eingewickelt und wurde zum Desktop)? Deinstallieren Sie einfach Autoprefixer! Mit PostCSS können Sie wie mit dem Konstruktor genau das erstellen, was Ihr Projekt benötigt.