Sie benötigen keinen CSS-Präprozessor

Native CSS hat in den letzten Monaten/Jahren große Fortschritte gemacht. In diesem Beitrag gehe ich auf die Hauptgründe ein, warum Leute CSS-Präprozessoren wie SASS, LESS und Stylus verwenden, und zeige Ihnen, wie Sie dieselben Dinge mit nativem CSS erreichen können.

Dateien trennen

Das Trennen von Dateien ist einer der Hauptgründe, warum Leute nach einem Präprozessor greifen. Seit einiger Zeit ist es jedoch möglich, eine andere Datei in eine CSS-Datei zu importieren. Es sieht so aus.

@import url("./utils.css");

Sie können einen relativen oder einen absoluten Pfad verwenden, genau wie Sie es für ein href auf einem Ankertag oder einer anderen Ressource tun würden.

Der Hauptunterschied zwischen diesem und einem Präprozessor besteht darin, dass ein Präprozessor zwar beim Kompilieren kombiniert wird, CSS jedoch zur Laufzeit eine http-Anfrage stellt.

Verschachtelungsregeln

Ok, das ist der Hauptgrund für die Verwendung eines Präprozessors. Zumindest ist das der Hauptgrund, warum ich in der Vergangenheit eines verwendet habe.

Aber CSS unterstützt jetzt die Verschachtelung und es funktioniert größtenteils so, wie Sie es von der Verwendung von Präprozessoren gewohnt sind.

header {
  h1 {
    font-weight: bold;
  }

  h2 {
    font-weight: normal;
  }
}

Ziemlich großartig, was für ein großer Vorteil es ist, CSS zu schreiben, wie wir es seit Jahrzehnten tun.

header h1 {
  font-weight: bold;
}

header h2 {
  font-weight: normal;
}

Sudo-Selektoren

Sudo-Selektoren funktionieren in nativem CSS auf die gleiche Weise, wie Sie es vielleicht auch von Präprozessoren gewohnt sind.

button {
  color: blue;

  &:hover {
    color: purple;
  }
}

Mehr über das Verschachteln erfahren Sie bei MDN.

Variablen

Variablen waren lange Zeit ein Grund für Präprozessoren. Sie können alle Ihre Farben, Abstände usw. in einer Datei speichern und diese überall global aktualisieren.

Nun, das können Sie seit einiger Zeit auch in nativem CSS tun. Tatsächlich ist es in mehrfacher Hinsicht besser als die Vorprozessoren.

Globale Variablen

Globale Variablen werden in eine :root-Regel eingeschlossen. Diese können überall referenziert werden.

:root {
  --bg-color: #333;
}

Um eine Variable zu verwenden, muss sie mit dem var-Tag referenziert werden

button {
  background-color: var(--bg-color);
}

Gültigkeitsbereichsvariablen

Sie können beispielsweise auch Variablen auf Selektoren anwenden...

header {
  --bg-color: #999;
}

In diesem Fall wird also auf var(--bg-color); verwiesen. innerhalb der Header-Auswahl führt zu #999;

Werte zur Laufzeit neu zuweisen

Der Hauptvorteil von CSS-Variablen gegenüber einem Präprozessor besteht darin, dass sie zur Laufzeit überschrieben werden können, wobei ein Präprozessor, sobald er kompiliert ist, dauerhaft ist.

Wenn Sie beispielsweise eine Website haben, die helle und dunkle Modi unterstützen soll. Dies kann sehr einfach mit CSS-Variablen erreicht werden.

:root {
  --bg-color: white;
}

body {
  background-color: var(--bg-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: black;
  }
}

Um so etwas mit einem Präprozessor zu erreichen, müssten Sie mit Javascript eine Klasse im Körper umschalten und alle Regeln mit einer .dark-Klasse oder etwas Ähnlichem überschreiben.

Berechnung

Mit den meisten Vorprozessoren wie LESS, Stylus oder SASS können Sie mathematische Berechnungen durchführen. Zum Beispiel, wenn Sie eine Variable in zwei Hälften teilen möchten usw.

Sie können dies in nativem CSS mit der Calc-Funktion tun.

@import url("./utils.css");

Wie cool ist das?

Farben verwandeln

Eine weitere beliebte Funktion (zumindest für mich) ist das Aufhellen und Abdunkeln von Farben in einem CSS-Präprozessor. Sie können dies jetzt auch in nativem CSS mit Color-Mix tun.

header {
  h1 {
    font-weight: bold;
  }

  h2 {
    font-weight: normal;
  }
}

Das Obige entspricht dem, was Sie mit einer Aufhellung (rot, 50 %) in einem Präprozessor gewohnt sind.

Zum Abdunkeln einfach mit Schwarz statt mit Weiß mischen

header h1 {
  font-weight: bold;
}

header h2 {
  font-weight: normal;
}

Ich hoffe, dass Sie bei der nächsten Auswahl der für ein Projekt zu verwendenden Tools natives CSS ausprobieren werden. Es hat einen langen Weg zurückgelegt.

Das obige ist der detaillierte Inhalt vonSie benötigen keinen CSS-Präprozessor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!