Funktionen vereinfachen Ihre Programmiererfahrung erheblich, und das gilt auch beim Schreiben von CSS-Code.

Less CSS ist ein robuster und dynamischer CSS-Präprozessor, der in den letzten Jahren große Aufmerksamkeit und Popularität erlangt hat. Als Präprozessor dient er als Erweiterung von „Vanilla CSS“, der traditionellen CSS-Stilsprache, die im Web verwendet wird Entwicklung, indem es eine Reihe zusätzlicher Features und Funktionalitäten bereitstellt, die das Gesamtdesign verbessern Erfahrung.

Wenn Sie mit dem Schreiben von Standard-CSS vertraut sind, können Sie ohne steile Lernkurve nahtlos zur Verwendung von Less CSS übergehen. Diese Kompatibilität macht es einfach, Ihre vorhandenen CSS-Kenntnisse beizubehalten und gleichzeitig die erweiterten Funktionen von Less zu nutzen.

Was sind Funktionen und warum sind sie wichtig?

In der Programmierung ist eine Funktion ein Codeblock, der eine bestimmte Aufgabe ausführt. Sie können es auch an anderer Stelle im Programm wiederverwenden. Funktionen nehmen normalerweise Daten auf, verarbeiten sie und geben die Ergebnisse zurück.

instagram viewer

Sie erleichtern die Reduzierung doppelten Codes innerhalb eines Programms. Angenommen, Sie haben ein Programm, das den Rabatt auf der Grundlage des vom Benutzer eingegebenen Preises berechnet. In einem Sprache wie JavaScript, Sie könnten es so implementieren:

FunktioncheckRabatt(Preis, Schwelle){
Wenn (Preis >= Schwellenwert){
lassen Rabatt = 5/100 * Preis;
zurückkehren„Ihr Rabatt beträgt $.“${Rabatt}`;
 } anders {
zurückkehren„Leider gibt es für diesen Artikel keinen Rabatt.“ `
 }
}

Dann können Sie die Funktion aufrufen und übergeben Preis und das Schwelle.

lassen Preis = prompt(„Geben Sie den Artikelpreis ein:“)
Alert (checkDiscount (Preis, 500))

Durch die Abstrahierung der Logik zur Überprüfung von Rabatten ist das Programm nicht nur lesbar, sondern Sie verfügen jetzt auch über einen wiederverwendbaren Codeblock, der den Rabatt verarbeitet und das Ergebnis zurückgibt. Funktionen können noch viel mehr, aber das sind nur die Grundlagen.

Funktionen in weniger CSS verstehen

Im herkömmlichen CSS steht Ihnen als Entwickler nur ein sehr begrenzter Funktionsumfang zur Verfügung. Eine der beliebtesten Funktionen in CSS ist die calc()Mathe-Funktion das genau das tut, was es scheint – es führt Berechnungen durch und verwendet das Ergebnis als Eigenschaftswert in CSS.

P{
Hintergrundfarbe: Rot;
Breite: kalk(13px- 4px);
}

In Less CSS gibt es mehrere Funktionen, die mehr als nur arithmetische Operationen ausführen. Eine Funktion, die Ihnen möglicherweise in Less begegnet, ist die Wenn Funktion. Der Wenn Die Funktion akzeptiert drei Parameter: eine Bedingung und zwei Werte. Der folgende Codeblock zeigt, wie Sie diese Funktion verwenden können:

@Breite: 10px;
@Höhe: 20px;
div{
Rand:Wenn((@Breite > @height), 10px, 20px)
}

Im obigen Codeblock prüft der Less-Compiler, ob die Variable Breite (definiert durch die @ Symbol) ist größer als die Variable Höhe. Wenn die Bedingung wahr ist, gibt die Funktion den ersten Wert nach der Bedingung zurück (10 Pixel). Andernfalls gibt die Funktion den zweiten Wert (20 Pixel) zurück.

Nach der Kompilierung sollte die CSS-Ausgabe etwa so aussehen:

div {
Rand: 20px;
}

So verwenden Sie einen Booleschen Wert in Less

Ein boolescher Wert ist eine Variable, die zwei mögliche Werte hat: WAHR oder FALSCH. Mit dem boolean() Mit der Funktion „Less“ können Sie den wahren oder falschen Wert eines Ausdrucks zur späteren Verwendung in einer Variablen speichern. So funktioniert das.

@Textfarbe: Rot;
@bg-color: boolean(@text-color = red);

Im obigen Codeblock prüft der Less-Compiler, ob Textfarbe ist rot. Dann ist die bg-Farbe Variable speichert den Wert.

div{
Hintergrundfarbe: Wenn(@bg-color,Grün Gelb);
}

Der obige Codeblock lässt sich in etwa wie folgt kompilieren:

div {
Hintergrundfarbe: Grün;
}

Ersetzen von Text innerhalb einer Zeichenfolge mit der Funktion replace()

Die Syntax für die ersetzen() Funktion sieht so aus:

ersetzen(Zeichenfolge, Muster, Ersatz, Flaggen)

Zeichenfolge stellt die Zeichenfolge dar, in der Sie suchen und ersetzen möchten. Muster ist die Zeichenfolge, nach der gesucht werden soll. Muster kann auch ein regulärer Ausdruck sein, ist aber normalerweise eine Zeichenfolge. Nach einem erfolgreichen Abgleich ersetzt der Less CSS-Compiler diesen Muster mit dem Ersatz.

Optional ist die ersetzen() Funktion kann auch enthalten Flaggen Parameter für reguläre Ausdrucksflags.

@string: "Hallo";
@Muster: „Hallo“;
@Ersatz: "ich";
div::Vor{
Inhalt: ersetzen(@string,@Muster,@Ersatz)
}

Der obige Codeblock sollte nach der Kompilierung Folgendes ergeben:

div::Vor {
Inhalt: "Hallo";
}

Listen Sie Funktionen in weniger CSS auf

In Less CSS verwenden Sie Kommas oder Leerzeichen, um eine Werteliste zu definieren. Zum Beispiel:

@Lebensmittel: "brot", "Banane", "Kartoffel", "Milch";

Du kannst den... benutzen Länge() Funktion zum Auswerten der Anzahl der Elemente in der Liste.

@Ergebnis: Länge(@Lebensmittel);

Sie können auch die verwenden Extrakt() Funktion zum Extrahieren des Werts an einer bestimmten Position. Wenn Sie beispielsweise das dritte Element im erhalten möchten Lebensmittel Liste, gehen Sie wie folgt vor:

@dritte-element: extract(@groceries, 3);

Im Gegensatz zu regulären Programmiersprachen, bei denen der Listenindex bei 0 beginnt, ist der Startindex einer Liste in Less CSS immer 1.

Eine weitere Listenfunktion, die beim Erstellen von Websites mit Less nützlich sein könnte, ist die Bereich() Funktion. Es werden drei Parameter berücksichtigt. Der erste Parameter gibt die Startposition im Bereich an. Der zweite Parameter gibt die Endposition an und der letzte Parameter gibt den Inkrement- oder Dekrementwert zwischen den einzelnen Elementen im Bereich an. Wenn nicht angegeben, ist der Standardwert 1.

div {
 Rand: Bereich (10px, 40px, 10);
}

Der obige Codeblock sollte wie folgt kompiliert werden:

div {
 Rand: 10px 20px 30px 40px;
}

Wie Sie sehen können, beginnt der Less CSS-Compiler bei 10 Pixel und erhöht den vorherigen Wert um 10, bis er die Endposition (40 Pixel) erreicht.

Erstellen einer einfachen Website mit weniger CSS-Funktionen

Es ist an der Zeit, alles, was Sie gelernt haben, zusammenzuführen und ein einfaches Projekt mit weniger CSS zu erstellen. Erstellen Sie einen Ordner und fügen Sie ihn hinzu index.htm Und Stillos Dateien.

Öffne das index.htm Datei und fügen Sie den folgenden HTML-Code hinzu.

html>
<htmllang=„en“>
<Kopf>
<MetaZeichensatz=„UTF-8“>
<MetaName=„Ansichtsfenster“Inhalt=„width=device-width, initial-scale=1.0“>
<Verknüpfungrel=„stylesheet/less“Typ=„Text/CSS“href=„style.less“ />
<Titel>DokumentierenTitel>
Kopf>
<Körper>
<divKlasse="Container">
<h1>
h1>
div>
<Skriptsrc=" https://cdn.jsdelivr.net/npm/less" >Skript>
Körper>
html>

Im obigen Codeblock gibt es ein übergeordnetes Element "Container"div mit einem leeren h1 Element. Der src Attribut auf dem Skript Tag zeigt auf den Pfad zum Less CSS Compiler.

Ohne das Skript Tag, kann der Browser Ihren Code nicht verstehen. Alternativ können Sie Less CSS über installieren Knotenpaketmanager (NPM), indem Sie den folgenden Befehl im Terminal ausführen:

npm install -g weniger

Wann immer Sie bereit sind, das zu kompilieren .weniger Um eine Datei zu erstellen, führen Sie einfach den folgenden Befehl aus und stellen Sie sicher, dass Sie die Datei angeben, in die der Compiler die Ausgabe schreiben soll.

lessc style.less style.css

Im Stillos Datei erstellen Sie zwei Variablen, nämlich: Behälterbreite Und Container-BG-Farbe um die Breite und Hintergrundfarbe des darzustellen "Container"div bzw.

@container-width: 50rem;
@container-bg-color: Gelb;

Als nächstes erstellen Sie drei Variablen, nämlich: Zeichenfolge, Muster, Und Ersatz. Fügen Sie dann die Stile für hinzu "Container"div und das h1 Element.

@string: „Hallo von den Kindern des Planeten Erde!“;
@Muster: „Kinder des Planeten Erde!“;
@Ersatz: „Bewohner von Pluto!“;
.Container{
Breite: @container-width;
Hintergrundfarbe: @container-bg-color;
Polsterung: Wenn(@container-width > 30rem, Bereich(20px, 80px, 20),"");
Grenze: solide;
}
h1:erstes Kind::nach{
Inhalt: ersetzen(@string,@Muster,@Ersatz);
}

Im Codeblock oben ist die Bereich() Funktion legt die fest Polsterung Grundstück auf der "Container"div. Der Less-Compiler sollte das kompilieren Stillos Datei wie folgt ablegen:

.Container {
Breite: 50rem;
Hintergrundfarbe: Gelb;
Polsterung: 20px 40px 60px 80px;
Grenze: solide;
}
h1:erstes Kind::nach {
Inhalt: "HalloausDieBewohnervonPluto!";
}

Wenn Sie die öffnen index.htm Datei im Browser, Folgendes sollte angezeigt werden:

Verbessern Sie Ihre Produktivität mit CSS-Präprozessoren

In regulären Programmiersprachen reduzieren Funktionen die Menge an Code, die Sie schreiben müssen, und minimieren Fehler. CSS-Präprozessoren wie Less bieten mehrere Funktionen, die das Schreiben von CSS-Code erleichtern.

CSS-Präprozessoren sind praktisch, wenn Sie mit großen Dateien arbeiten. Sie erleichtern das Debuggen von Problemen und steigern so die Produktivität des Entwicklers.