Möglicherweise sind Sie mit anderen CSS-Präprozessoren besser vertraut, aber übersehen Sie diesen Konkurrenten nicht.

Wenn es um die Webentwicklung geht, ist die Verwendung von CSS die häufigste Art, eine Anwendung zu gestalten. Die Arbeit mit CSS kann jedoch umständlich sein, da das Debuggen bekanntermaßen schwierig ist.

Erfahren Sie, wie Sie Stylus CSS verwenden, und Sie haben eine weitere Option: einen der beliebtesten verfügbaren CSS-Präprozessoren.

Was ist ein CSS-Präprozessor?

CSS-Präprozessoren sind Dienstprogramme, die das Schreiben von CSS erleichtern. Sie kompilieren häufig Code aus ihrer eigenen benutzerdefinierten Syntax .css Format, das Browser verstehen können.

CSS-Präprozessoren wie Sass bieten beispielsweise spezielle Funktionen wie Schleifen, Mixins, verschachtelte Selektoren und if/else-Anweisungen. Diese Funktionen erleichtern die Pflege Ihres CSS-Codes, insbesondere in großen Teams.

Um einen CSS-Prozessor zu verwenden, müssen Sie den Compiler in Ihrer lokalen Umgebung und/oder Ihrem Produktionsserver installieren. Einige Frontend-Build-Tools wie Vite ermöglichen die Einbindung

instagram viewer
CSS-Präprozessoren wie LessCSS in Ihrem Projekt.

So funktioniert Stylus CSS

Um Stylus in Ihrer lokalen Umgebung zu installieren, benötigen Sie Node.js und eines von beiden Knotenpaketmanager (NPM) oder Garn auf Ihrer Maschine installiert. Führen Sie den folgenden Terminalbefehl aus:

NPM-Installationsstift

Oder:

Garn hinzufügen Stift

Jede Stylus-CSS-Datei endet mit a .stil Verlängerung. Sobald Sie Ihren Stylus-CSS-Code geschrieben haben, können Sie ihn mit diesem Befehl kompilieren:

Stift.

Dies sollte alles kompilieren .stil Dateien und Ausgabe .css Dateien im aktuellen Verzeichnis. Der Stylus-Compiler ermöglicht auch das Kompilieren .css Dateien in .stil mit dem --css Flagge. Um a umzuwandeln .css Datei an die .stil formatieren, verwenden Sie diesen Befehl:

Stift --css style.css style.styl

Syntax- und Elternselektoren in Stylus CSS

In herkömmlichem CSS definieren Sie einen Stilblock mit geschweiften Klammern; Wenn diese Zeichen nicht einbezogen werden, führt dies zu fehlerhaften Stilen. In Stylus CSS ist die Verwendung von geschweiften Klammern optional.

Stylus unterstützt eine Python-ähnliche Syntax, was bedeutet, dass Sie Blöcke stattdessen mithilfe von Einrückungen definieren können, wie folgt:

.Container
Rand: 10px

Der obige Codeblock wird mit dem folgenden CSS kompiliert:

.Container {
Rand: 10px;
}

Genau wie in CSS-Präprozessoren wie Less können Sie mit dem auf einen übergeordneten Selektor verweisen & Charakter:

Taste
Farbe: Weiss;
 &:schweben
Farbe: Gelb;

Was kompiliert zu:

Taste {
Farbe: #F f f;
}
Taste:schweben {
Farbe: #ff0;
}

So verwenden Sie Variablen in Stylus CSS

In CSS-Präprozessoren wie Less CSS definieren Sie Variablen mit @ Charakter, während herkömmliches CSS „--“ verwendet, um eine Variable zu definieren.

In Stylus sind die Dinge etwas anders: Sie benötigen kein spezielles Symbol, um eine Variable zu definieren. Definieren Sie die Variable stattdessen einfach mit einem Gleichheitszeichen (=), um es an einen Wert zu binden:

bg-Farbe = Schwarz

Sie können die Variable nun im verwenden .stil Datei wie folgt:

div
Hintergrundfarbe: bg-Farbe

Die obigen Codeblöcke werden mit dem folgenden CSS kompiliert:

div {
Hintergrundfarbe: #000;
}

Sie können eine Nullvariable mit Klammern definieren. Zum Beispiel:

leere Variable = ()

Sie können mit dem auf andere Eigenschaftswerte verweisen @ Symbol. Wenn Sie beispielsweise die Höhe eines Divs auf die Hälfte seiner Breite festlegen möchten, können Sie Folgendes tun:

Elementbreite = 563px
div
Breite: Elementbreite
Höhe: (Elementbreite / 2)

Das würde funktionieren, aber Sie können auch die Erstellung der Variablen ganz vermeiden und auf sie verweisen Breite Eigenschaftswert stattdessen:

div
Breite: 563px
Höhe: (@Breite / 2)

In diesem Codeblock ist die @ Mit dem Symbol können Sie auf das Tatsächliche verweisen Breite Grundstück auf der div. Unabhängig davon, welchen Ansatz Sie beim Kompilieren wählen .stil Datei sollten Sie das folgende CSS erhalten:

div {
Breite: 563px;
Höhe: 281.5px;
}

Funktionen in Stylus CSS

Sie können Funktionen erstellen, die Werte in Stylus CSS zurückgeben. Nehmen wir an, Sie möchten das festlegen Textausrichtung Eigenschaft eines Divs auf „center“, wenn das Breite ist größer als 400 Pixel oder „links“, wenn das Breite ist kleiner als 400px. Sie können eine Funktion erstellen, die diese Logik verarbeitet.

im Zentrum anordnen(N)
Wenn (N > 400)
 'Center'
andersWenn (N < 200)
 'links'
div {
Breite: 563px
Textausrichtung: im Zentrum anordnen(@Breite)
Höhe: (@Breite / 2)
}

Dieser Codeblock ruft die auf im Zentrum anordnen Funktion, Übergabe der Breite Eigenschaftswert durch Referenzierung mit dem @ Symbol. Der im Zentrum anordnen Funktion prüft, ob ihr Parameter, N, ist größer als 400 und gibt „center“ zurück, wenn dies der Fall ist. Wenn N kleiner als 200 ist, gibt die Funktion „left“ zurück.

Wenn der Compiler ausgeführt wird, sollte er die folgende Ausgabe erzeugen:

div {
Breite: 563px;
Textausrichtung: 'Center';
Höhe: 281.5px;
}

In den meisten Programmiersprachen weisen Funktionen Parameter basierend auf der Reihenfolge zu, in der Sie sie angeben. Dies kann zu Fehlern führen, wenn Parameter in der falschen Reihenfolge übergeben werden. Dies ist umso wahrscheinlicher, je mehr Parameter Sie übergeben müssen.

Stylus bietet eine Lösung: benannte Parameter. Verwenden Sie sie anstelle von geordneten Parametern, wenn Sie eine Funktion aufrufen, etwa so:

subtrahieren(B:30px, A:10px)/*-20px*/

Wann sollte ein CSS-Präprozessor verwendet werden?

CSS-Präprozessoren sind sehr leistungsstarke Dienstprogramme, mit denen Sie Ihren Arbeitsablauf optimieren können. Die Wahl des richtigen Werkzeugs für Ihr Projekt kann dazu beitragen, Ihre Produktivität zu steigern. Wenn Ihr Projekt nur eine kleine Menge CSS benötigt, ist die Verwendung eines CSS-Präprozessors möglicherweise übertrieben.

Wenn Sie ein großes Projekt erstellen, vielleicht als Teil eines Teams, das auf eine große Menge CSS angewiesen ist, sollten Sie die Verwendung eines Präprozessors in Betracht ziehen. Sie bieten Funktionen wie Funktionen, Schleifen und Mixins, die die Gestaltung komplexer Projekte erleichtern.