Was ist Less CSS und wie verwendet man es?

Wenn Sie ein erfahrener CSS-Entwickler sind, sind Sie sich der Nachteile der Sprache bewusst. Es mangelt immer noch an umfassender Unterstützung für seit langem geforderte Funktionen wie Nesting und Mixins.

Less (Leaner Style Sheets) ist eine CSS-Erweiterung mit vielen leistungsstarken Funktionen. Wenn Sie sich mit CSS auskennen, ist das Erlernen von Less einfach, da die Syntax von Less sehr ähnlich ist.

So installieren Sie weniger

Sie können Less mit dem installieren JavaScript-Paketmanager, NPM durch Ausführen:

npm install less -g

Nach der Installation können Sie kompilieren .weniger Dateien zu .css Verwendung der wenigerc Befehl. Beispielsweise wird der folgende Befehl kompiliert Stillos und gibt die Ergebnisse in a aus style.css Datei.

lessc style.less style.css

Variablen in Less

nicht wie reguläres CSS, das den „--“-Operator zum Definieren von Variablen verwendet

, Less definiert Variablen mit dem „@“-Symbol. Zum Beispiel:

@Breite:40px;
@Höhe:80px;

Der Codeblock erstellt einfach zwei Variablen, Breite und Höhe, die jeweils zwei Werte enthalten: 40 Pixel und 80 Pixel. Es ist üblich, häufig verwendete Werte in CSS zu übernehmen und sie in einer Variablen zu speichern. Dadurch ist es einfacher, diese Werte zu ändern, da es nur eine Kontrollquelle gibt.

So können Sie Variablen in Less verwenden. Erstelle ein index.htm Datei und fügen Sie den folgenden Boilerplate-Code hinzu:

html>
<htmllang=„en“>
<Kopf>
<MetaZeichensatz=„UTF-8“>
<Metahttp-äquiv=„X-UA-kompatibel“Inhalt=„IE=Kante“>
<MetaName=„Ansichtsfenster“Inhalt=„width=device-width, initial-scale=1.0“>
<Verknüpfungrel=„Stylesheet“href=„style.css“>
<Titel>Weniger CSS verwendenTitel>
Kopf>
<Körper>
<div>
 Hallo von den Kindern des Planeten Erde!
div>
Körper>
html>

Als nächstes erstellen Sie eine Stillos Datei und fügen Sie Folgendes hinzu:

@Breite:400px;
@Höhe:400px;
@vertikal-center: Center;
@txt-white: Weiss;
@bg-red: RGB(220, 11, 11);
@font-40:40px;
div {
Breite: @Breite;
Höhe: @Höhe;
Anzeige: biegen;
Farbe: @txt-white;
Hintergrundfarbe: @bg-red;
Schriftgröße: @font-40;
}

Jetzt können Sie das kompilieren .weniger Datei an .css Verwendung der wenigerc Befehl:

lessc style.less style.css

Das kompilierte CSS sollte so aussehen:

div {
Breite: 400px;
Höhe: 400px;
Anzeige: biegen;
Farbe: Weiss;
Hintergrundfarbe: #dc0b0b;
Schriftgröße: 40px;
}

Wenn Sie Ihren Browser öffnen, sollten Sie Folgendes sehen:

Mit Variablen können Sie in Less noch viel mehr tun, z. B. Interpolation, die es Ihnen ermöglicht, Variablen als Selektornamen, URLs und mehr zu verwenden. Hier ist ein Beispiel für die Implementierung der Variableninterpolation:

@custom-selector: Container;
.@{custom-selector} {
Polsterung: 10px;
Rand: 10px;
Grenze: solide 10px;
}

Der obige Codeblock verwendet die @{...} -Klausel, um eine Variable als Selektor zu verwenden. Beim Kompilieren ergibt der Code Folgendes:

.Container{
Polsterung: 10px;
Rand: 10px;
Grenze: solide 10px;
}

Arithmetische Operationen in weniger

Less bietet auch Unterstützung für arithmetische Operationen wie Addition, Subtraktion, Division und Multiplikation. Diese Operationen funktionieren mit Konstanten, Werten und Variablen.

@variable-1:5px;
// Multiplikationsoperation zwischen Variable und Konstante
@variable-2:@variable-1 * 2
// Additionsoperation zwischen Wert und Variable.
@variable-3:10px + @variable-2

So verwenden Sie Mixins

Mit Mixins können Sie Stile (oder CSS-Code) im gesamten Stylesheet wiederverwenden. Andere CSS-Erweiterungen wie Sass bieten auch Mixins an. Um zu veranschaulichen, wie Mixins in Less funktionieren, erstellen Sie eine index.htm und fügen Sie den folgenden Code hinzu:

html>
<htmllang=„en“>
<Kopf>
<MetaZeichensatz=„UTF-8“>
<Metahttp-äquiv=„X-UA-kompatibel“Inhalt=„IE=Kante“>
<MetaName=„Ansichtsfenster“Inhalt=„width=device-width, initial-scale=1.0“>
<Verknüpfungrel=„Stylesheet“href=„style.css“>
<Titel>Weniger CSS verwendenTitel>
Kopf>
<Körper>
<div>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
 Architecto Repudiandae ipsum animi velit id iste dolore reprehenderit
 Dolorum! Voluptate quos autem culpa et sit, senta reiciendis
 facilis und sequi.
div>
<P>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
 Architecto Repudiandae ipsum animi velit id iste dolore reprehenderit
 Dolorum! Voluptate quos autem culpa et sit, senta reiciendis
 facilis und sequi.
P>
<P>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
 Architecto Repudiandae ipsum animi velit id iste dolore reprehenderit
 Dolorum! Voluptate quos autem culpa et sit, senta reiciendis
 facilis und sequi.
P>
Körper>
html>

Als nächstes erstellen Sie eine Stillos Datei und fügen Sie die folgenden Zeilen hinzu:

.Beispieltext() {
Hintergrundfarbe: Gelb;
}
.erster Brief() {
Hintergrundfarbe: Rot;
Farbe: Weiss;
Schriftgröße: 30px;
}
P {
.Beispieltext();
}
P::erster Brief {
.erster Brief();
}

Im obigen Codeblock gibt es zwei Mixin-Klassen: .Beispieltext Und .erster Brief. Wenn Sie ein Mixin in einem anderen Teil des Stylesheets verwenden möchten, referenzieren Sie es einfach namentlich mit Klammern am Ende: .mixin(). Im Browser sollten Sie etwa Folgendes sehen:

Stilverschachtelung in weniger

Nehmen wir an, Sie haben ein übergeordnetes Div mit zwei Elementen als untergeordneten Elementen: a P Element und ein anderes div. Normalerweise, wenn Sie das stylen möchten P Element mit der Farbe Rot und dem div Elemente mit der Farbe Grün könnten Sie wie folgt vorgehen:

divP {
Farbe: Rot;
}
div {
Farbe: Grün
}

Less bietet durch die Verwendung von eine ähnliche Funktionalität nisten. In diesem Fall wäre das Less-Äquivalent des obigen Codeblocks also:

div {
Farbe: Grün;
P {
Farbe: Rot;
 }
}

Dies ist nicht nur einfacher zu verstehen, sondern macht den Code auch besser wartbar. Das Verweisen auf übergeordnete Selektoren mit less ist mit dem einfacher & Operator. Zum Beispiel:

Taste {
Hintergrundfarbe: Blau;
Grenze: keiner;
&:schweben {
Hintergrundfarbe: grau;
verwandeln: Skala(1.2);
 }
}

Der obige Codeblock führt beim Kompilieren zu folgendem CSS-Code:

Taste {
Hintergrundfarbe: Blau;
Grenze: keiner;
}
Taste:schweben {
Hintergrundfarbe: grau;
verwandeln: Skala(1.2);
}

Umfang und Funktionen in Less verstehen

Wie normale Programmiersprachen haben Variablen den Gültigkeitsbereich des Blocks, in dem Sie sie definieren. Um dies zu veranschaulichen, erstellen Sie ein neues index.htm Datei und fügen Sie den ersten zuvor bereitgestellten HTML-Boilerplate-Code hinzu. Fügen Sie dann den folgenden Block hinzu Körper Schild:

<divKlasse=„outer-div“>
 Äußere Div sollte rot sein.
<br />
<SpanneKlasse=„inner-div“>
 Das innere Div sollte grün sein.
Spanne>
div>

Im Stillos Datei, fügen Sie die folgenden Zeilen hinzu:

@bg-color: Rot;
Körper {
Schriftgröße: 40px;
Farbe: Weiss;
Rand: 20px;
}
.inner-div {
@bg-color: Grün;
Hintergrundfarbe: @bg-color;
}
.outer-div {
Hintergrundfarbe: @bg-color;
}

Der innere-div Block definiert die neu bg-Farbe Variable, die nur auf diesen Block beschränkt ist. Die grüne Farbe gilt also nur für diese Klasse und hat keinen Einfluss auf die globale Klasse bg-Farbe Variable. Wenn Sie das Ergebnis kompilieren und im Browser öffnen, sollten Sie Folgendes sehen:

Less bietet außerdem praktische Funktionen, die in manchen Szenarien nützlich sein können. Wenn Sie beispielsweise einen Stil nur dann festlegen möchten, wenn eine bestimmte Bedingung erfüllt ist, können Sie dies mit tun Wenn Funktion. Diese Funktion hat die folgende Syntax:

Wenn((Bedingung), Wert1, Wert2)

Der Code kehrt zurück Wert1 wenn die Bedingung erfüllt ist und Wert2 ansonsten. Hier ist ein Beispiel:

@var1:20px;
@var2:20px;
div {
Polsterung: Wenn((@var1 = @var2), 10px, 20px);
}

Der obige Codeblock sollte beim Kompilieren zu folgendem CSS führen:

div {
Polsterung: 10px;
}

Machen Sie mehr mit weniger und anderen CSS-Erweiterungen

Tausende Entwickler nutzen Less, um das Schreiben von CSS ein wenig angenehmer zu gestalten. Erstaunliche Funktionen wie Funktionen, Mixins und Variablen sind nur ein kleiner Teil dessen, was Less bietet.

Less eignet sich sowohl für kleine als auch für große Projekte. Es ist erwähnenswert, dass andere ebenso erstaunliche CSS-Erweiterungssprachen wie Sass und Stylus CSS einen Blick wert sind.