CSS-Präprozessoren sind Skriptsprachen, die die Standardfunktionen von CSS erweitern. Sie ermöglichen es uns, Logik in unserem CSS-Code zu verwenden, z. B. Variablen, Verschachtelung, Vererbung, Mixins, Funktionen und mathematische Operationen. CSS-Präprozessoren machen es einfach, sich wiederholende Aufgaben zu automatisieren, die Anzahl der Fehler und den aufgeblähten Code zu reduzieren, wiederverwendbare Codeschnipsel zu erstellen und Abwärtskompatibilität zu gewährleisten.
Jeder CSS-Präprozessor hat seine eigene Syntax, die er in reguläres CSS kompiliert, damit die Browser es auf der Client-Seite rendern können. Die drei populärsten und stabilsten CSS-Präprozessoren sind derzeit LESS, Sass und Stylus, aber es gibt auch noch viele kleinere. Alle CSS-Präprozessoren tun ähnliche Dinge, aber auf unterschiedliche Weise und mit eigenen Syntaxen. Jeder von ihnen verfügt über einige fortgeschrittene Funktionen, die ihm eigen sind, sowie über ein eigenes Ökosystem (Tools, Frameworks, Bibliotheken).
Heute geht es um WENIGER.
1. @Variablen
Variablen erleichtern die Pflege Ihres Codes, da Sie diese Werte von einer einzigen Stelle aus steuern können:
// Variables
@link-color: #428bca; // sea blue
@link-color-hover: darken(@link-color, 10%);
// Usage
a,
.link {
color: @link-color;
}
a:hover {
color: @link-color-hover;
}
.widget {
color: #fff;
background: @link-color;
}
1.1 @verschachtelte Selektoren
.button {
&-ok {
background-image: url("ok.png");
}
&-cancel {
background-image: url("cancel.png");
}
&-custom {
background-image: url("custom.png");
}
}
Ergebnis nach dem Kompilieren:
.button-ok {
background-image: url("ok.png");
}
.button-cancel {
background-image: url("cancel.png");
}
.button-custom {
background-image: url("custom.png");
}
2. @Importe
CSS @import stellt eine weitere http-Anfrage, um ein anderes Stylesheet abzurufen, während Less @import den Inhalt aus Ihrer importierten Datei abgreift und in das kompilierte Stylesheet einfügt. Das bedeutet nur eine http-Anfrage, so dass Sie Teilbereiche erstellen und Ihr CSS ein wenig besser organisieren können, ohne dass dies Nachteile mit sich bringt!
Bei einem normalen Import wird der Inhalt dieser Datei in die entsprechende Datei kopiert. Super nützlich. Die Verkettung von Dateien ist eine äußerst wichtige Funktion von Präprozessoren.
/* Normal import */ @import "colors-or-whatever.less";
Ein (Referenz-)Import tut das nicht. Tatsächlich wird überhaupt nichts in die Datei eingefügt, die darum bittet. Der Code in dieser Datei ist erst jetzt einsatzbereit, entweder durch den Aufruf eines Mixins in der Datei oder durch die Erweiterung eines Selektors in der Datei.
@import (reference) "https://s3-us-west-2.amazonaws.com/s.cdpn.io/18728/pure.less";
.my-button {
&:extend(.pure-button all);
}
3. @mixins
Mixins kopieren alle Eigenschaften in einen Selektor, was zu unnötiger Duplizierung führen kann. Daher können Sie anstelle von Mixins Erweiterungen verwenden, um den Selektor bis zu den Eigenschaften zu verschieben, die Sie verwenden möchten, wodurch weniger CSS erzeugt wird.
.a, #b {
color: red;
}
.mixin-class {
.a();
}
.mixin-id {
#b();
}
Ergebnis nach dem Kompilieren:
.a, #b {
color: red;
}
.mixin-class {
color: red;
}
.mixin-id {
color: red;
}
4. @erweitern
Extend ist eine Pseudoklasse von Less, die den Selektor, auf den sie gesetzt wird, mit anderen Selektoren zusammenführt, die zu dem passen, auf den sie verweist.
nav ul {
&:extend(.inline);
background: blue;
}
.inline {
color: red;
}
Ergebnis nach dem Kompilieren:
nav ul {
background: blue;
}
.inline,
nav ul {
color: red;
}
5. @math
Zu den mathematischen Funktionen gehören Methoden, die für die Durchführung numerischer Operationen wie Runden, Quadratwurzel, Potenzwert, Modulus, Prozentsatz usw. verwendet werden.
@nav-height: 60px;
body {
padding-top: @nav-height + 40px;
}
.nav {
position: fixed;
top: 0;
width: 100%;
height: @nav-height;
}
.one-third {
width: (100% / 3);
}
Ergebnis nach dem Kompilieren:
body {
padding-top: 100px;
}
.nav {
position: fixed;
top: 0;
width: 100%;
height: 60px;
}
.one-third {
width: 33.33333333%;
}
6. @Schleifen
Eines der besten Dinge an LESS ist, dass Sie Schleifen ausführen und Klassen dynamisch erstellen können.
Das folgende Beispiel zeigt, wie man dynamisch Klassen in 10er-Schritten erstellt. Ich hätte auch 10 Klassen schreiben können, aber dieser Weg ist viel schöner und einfacher zu pflegen.
.mixin-loop (@index) when (@index > 0) {
.per-@{index}0 {
display: inline-block;
width: @index * 10%;
}
.mixin-loop(@index - 1);
}
.mixin-loop(10);
Ergebnis nach dem Kompilieren:
.per-100 {
display: inline-block;
width: 100%;
}
.per-90 {
display: inline-block;
width: 90%;
}
.per-80 {
display: inline-block;
width: 80%;
}
.per-70 {
display: inline-block;
width: 70%;
}
.per-60 {
display: inline-block;
width: 60%;
}
.per-50 {
display: inline-block;
width: 50%;
}
.per-40 {
display: inline-block;
width: 40%;
}
.per-30 {
display: inline-block;
width: 30%;
}
.per-20 {
display: inline-block;
width: 20%;
}
.per-10 {
display: inline-block;
width: 10%;
}