Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. HTML & CSS
Code

Sass vs. LESS vs. Stylus: Preprozessor-Shootout

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Die wahre Kraft eines CSS-Präprozessors zu nutzen, ist ein Abenteuer.  Es gibt unzählige Sprachen, Syntaxen und Funktionen, die alle sofort einsatzbereit sind.

In diesem Artikel werden die verschiedenen Funktionen und Vorteile der Verwendung von drei verschiedenen Präprozessoren (Sass, LESS und Stylus) behandelt.


Einführung

Präprozessoren erzeugen CSS, das in allen Browsern funktioniert.

CSS3-Präprozessoren sind Sprachen, die ausschließlich zu dem Zweck geschrieben wurden, coole, einfallsreiche Funktionen zu CSS hinzuzufügen, ohne die Browserkompatibilität zu beeinträchtigen.  Sie tun dies, indem sie den Code, den wir schreiben, in reguläres CSS kompilieren, das in jedem Browser bis in die Steinzeit verwendet werden kann.  Es gibt Tausende von Funktionen, die Präprozessor an den Tisch bringen, und in diesem Artikel werden wir einige der publizierten und einige der nicht so publizierten Funktionen behandeln.  Lass uns anfangen.


Syntax

Der wichtigste Teil beim Schreiben von Code in einem CSS-Präprozessor ist das Verstehen der Syntax.  Glücklicherweise ist (oder kann) die Syntax für alle drei Präprozessoren mit regulärem CSS identisch.

Sass & LESS

Sass und LESS verwenden beide die Standard-CSS-Syntax.  Dies macht es extrem einfach, eine vorhandene CSS-Datei in einen der beiden Präprozessoren zu konvertieren.  Sass verwendet die Dateierweiterung .scss und LESS die Erweiterung .less.  Die grundlegende Sass- oder LESS-Datei kann wie folgt eingerichtet werden:

Wie Sie vielleicht schon bemerkt haben, handelt es sich hierbei lediglich um ein reguläres CSS, das sich sowohl in Sass als auch in LESS perfekt zusammenstellt.

Es ist wichtig zu wissen, dass Sass auch eine ältere Syntax hat, die Semikola und geschweifte Klammern weglässt. Obwohl dies immer noch vorhanden ist, ist es alt und wir werden es nach diesem Beispiel nicht mehr verwenden.  Die Syntax verwendet die Dateierweiterung .sass und sieht folgendermaßen aus:

Stylus

Die Syntax für Stylus ist viel ausführlicher.  Mit der Dateierweiterung .styl akzeptiert Stylus die Standard-CSS-Syntax, akzeptiert jedoch auch einige andere Variationen, bei denen Klammern, Doppelpunkte und Semikolons optional sind.  Zum Beispiel:

Die Verwendung verschiedener Variationen im selben Stylesheet ist ebenfalls gültig, daher werden die folgenden ohne Fehler kompiliert.


Variablen

Variablen können im gesamten Stylesheet deklariert und verwendet werden.  Sie können einen beliebigen Wert haben, bei dem es sich um einen CSS-Wert handelt (z. B. Farben, Zahlen [Einheiten] oder Text.). Sie können überall in unserem Stylesheet referenziert werden.

Sass

Sass-Variablen werden mit dem $ -Symbol vorangestellt und der Wert und der Name werden wie bei einer CSS-Eigenschaft durch ein Semikolon getrennt.

LESS

LESS-Variablen sind genau die gleichen wie Sass-Variablen, außer den Variablennamen wird das @ -Symbol vorangestellt.

Stylus

Für Stiftvariablen müssen ihnen keine vorangestellten Werte hinzugefügt werden, obwohl das Symbol $ zulässig ist.  Das abschließende Semikolon ist wie immer nicht erforderlich, aber ein Gleichheitszeichen zwischen Wert und Variable ist vorhanden.  Zu beachten ist, dass Stylus (0.22.4) kompiliert wird, wenn das @ -Symbol einem Variablennamen vorangestellt wird, der Wert jedoch nicht angewendet wird, wenn darauf verwiesen wird.  Mit anderen Worten, mach das nicht.

Kompiliertes CSS

Jede der oben genannten Dateien wird in das gleiche CSS übersetzt.  Sie können Ihre Vorstellungskraft nutzen, um zu sehen, wie nützlich Variablen sein können.  Wir müssen nicht mehr eine Farbe ändern und müssen sie zwanzigmal erneut eingeben, oder möchten die Breite unserer Website ändern und müssen herumgraben, um sie zu finden.  Hier ist das CSS nach der Kompilierung:


Verschachtelung

Wenn in unserem CSS mehrere Elemente mit demselben übergeordneten Element referenziert werden müssen, kann es umständlich sein, das übergeordnete Element immer wieder zu schreiben.

Stattdessen können wir mit einem Präprozessor die untergeordneten Selektoren in die Klammern des übergeordneten Elements schreiben.  Das Symbol & verweist auf den übergeordneten Selektor.

Sass, LESS & Stylus

Alle drei Präprozessoren haben die gleiche Syntax für die Verschachtelung von Selektoren.

Kompiliertes CSS

Dies ist das kompilierte CSS aus dem obigen Code.  Es ist genau das gleiche wie zu Beginn - wie bequem!


Mixins

Mixins sind Funktionen, die die Wiederverwendung von Eigenschaften in unserem Stylesheet ermöglichen.  Anstatt mehrmals durch unser Stylesheet zu gehen und eine Eigenschaft zu ändern, können wir sie jetzt einfach in unserem Mixin ändern.  Dies kann sehr nützlich sein, um Elemente und Herstellerpräfixe gezielt zu gestalten.  Wenn Mixins aus einem CSS-Selektor aufgerufen werden, werden die Mixin-Argumente erkannt und die Stile im Mixin werden auf den Selektor angewendet.

Sass

LESS

Stylus

Kompiliertes CSS

Alle Präprozessoren kompilieren nach demselben Code:


Erbe

Wenn Sie CSS auf altmodische Weise schreiben, können Sie den folgenden Code verwenden, um dieselben Stile auf mehrere Elemente gleichzeitig anzuwenden:

Das funktioniert großartig, aber wenn wir die Elemente individuell weiter gestalten müssen, muss für jedes Element ein weiterer Selektor erstellt werden, der schnell unübersichtlich und schwieriger zu warten ist.  Um dem entgegenzuwirken, kann Vererbung verwendet werden.  Vererbung ist die Fähigkeit anderer CSS-Selektoren, die Eigenschaften eines anderen Selektors zu erben.

Sass & Stylus

Kompiliertes CSS (Sass & Stylus)

LESS

LESS unterstützt nicht wirklich erbliche Stile wie Sass und Stylus.  Anstatt mehrere Selektoren zu einem Satz von Eigenschaften hinzuzufügen, behandelt es Vererbung wie ein Mixin ohne Argumente und importiert die Stile in ihre eigenen Selektoren.  Der Nachteil ist, dass die Eigenschaften in Ihrem kompilierten Stylesheet wiederholt werden.  So würden Sie es einrichten:

Kompiliertes CSS (WENIGER)

Wie Sie sehen, wurden die Stile von .block in die Selektoren eingefügt, denen wir die Vererbung geben wollten.  Es ist wichtig zu wissen, dass Priorität hier zum Thema werden kann. Seien Sie also vorsichtig.


Importieren

In der CSS-Community ist das Importieren von CSS verpönt, da mehrere HTTP-Anforderungen erforderlich sind.  Das Importieren mit einem Präprozessor funktioniert jedoch anders.  Wenn Sie eine Datei aus einem der drei Präprozessoren importieren, wird der Import während des Kompilierens buchstäblich eingeschlossen, sodass nur eine Datei erstellt wird.  Beachten Sie jedoch, dass der Import von regulären .css-Dateien mit dem Standard @import "file.css"; kompiliert wird.  Code.  Mixins und Variablen können auch importiert und in Ihrem Stylesheet verwendet werden.  Das Importieren macht das Erstellen separater Dateien für die Organisation sehr lohnend.

Sass, LESS, & Stylus

Kompiliertes CSS


Farbfunktionen

Farbfunktionen sind in Funktionen eingebaut, die beim Kompilieren eine Farbe transformieren.  Dies kann äußerst nützlich sein, um Farbverläufe, dunkle Schwebefarben und vieles mehr zu erstellen.

Sass

Dies ist nur eine kurze Liste der verfügbaren Farbfunktionen in Sass. Eine vollständige Liste der verfügbaren Sass-Farbfunktionen finden Sie in der Sass-Dokumentation.

Farbfunktionen können überall dort verwendet werden, wo eine Farbe gültiges CSS ist.  Hier ist ein Beispiel:

LESS

Eine Liste aller LESS-Funktionen finden Sie in der LESS-Dokumentation.

Hier ist ein Beispiel für die Verwendung einer Farbfunktion in LESS:

Stylus

Eine vollständige Liste aller Stylus-Farbfunktionen finden Sie in der Stylus-Dokumentation.

Hier ein Beispiel mit den Farbfunktionen des Stylus:


Operationen

Mathematik in CSS zu machen ist sehr nützlich und jetzt vollständig möglich.  Es ist einfach und so wird es gemacht:

Sass, LESS, & Stylus


Praktische Anwendungen

Wir haben eine Menge der Funktionen und Neuerungen behandelt, die Vorverarbeiter tun können, aber wir haben nichts Praktisches oder Praktisches behandelt.  Hier eine kurze Liste realer Anwendungen, bei denen die Verwendung eines Präprozessors eine Rettung darstellt.

Hersteller-Präfixe

Dies ist einer der Gründe, warum Sie einen Präprozessor verwenden sollten, und das aus einem sehr guten Grund - es spart Zeit und Tränen.  Das Erstellen eines Mixins zur Handhabung von Herstellerpräfixen ist einfach und erspart viel Wiederholung und mühsames Bearbeiten.  So geht's:

Sass

LESS

Stylus

Kompiliertes CSS

3D Text

Das Vorstellen von 3D-Text mit mehreren text-shadows ist eine clevere Idee.  Das einzige Problem ist, dass das Ändern der Farbe danach schwierig und mühsam ist.  Mit Mixins und Farbfunktionen können wir 3D-Text erstellen und die Farbe im laufenden Betrieb ändern!

Sass

LESS

Stylus

Ich entschied mich dafür, die text-shadows in eine Zeile zu schreiben, da ich die geschweiften Klammern weggelassen habe.

Kompiliertes CSS

Endresultat

Säulen

Die Verwendung von Zahlenoperationen und Variablen für Spalten ist eine Idee, auf die ich gekommen bin, als ich zum ersten Mal mit CSS-Präprozessoren spielte.  Durch das Deklarieren einer gewünschten Breite in einer Variablen können Sie diese leicht und ohne Nachdenken ändern.  So wird's gemacht:

Sass

LESS

Stylus

Kompiliertes CSS


Bemerkenswerte Macken

Bei der Verwendung eines CSS-Präprozessors gibt es einige Macken.  Ich werde ein paar der lustigen besprechen, aber wenn Sie wirklich daran interessiert sind, alle zu finden, empfehlen wir Ihnen, die Dokumentation zu durchforsten oder, besser noch, einen Präprozessor in Ihrer täglichen Codierung zu verwenden.

Fehler melden

Wenn Sie CSS für eine anständige Zeit geschrieben haben, sind Sie sicher an einem Punkt angelangt, an dem Sie irgendwo einen Fehler hatten und ihn einfach nicht finden konnten.  Wenn Sie wie ich sind, haben Sie wahrscheinlich den Nachmittag damit verbracht, Ihre Haare herauszuziehen und verschiedene Dinge zu kommentieren, um den Fehler zu finden.

CSS-Präprozessoren melden Fehler. Es ist einfach so einfach. Wenn mit Ihrem Code etwas nicht stimmt, erfahren Sie, wo und wann Sie Glück haben: warum.  Sie können diesen Blogbeitrag lesen, wenn Sie wissen möchten, wie Fehler in den verschiedenen Präprozessoren gemeldet werden.

Bemerkungen

Beim Kompilieren mit einem CSS-Präprozessor wird ein doppelter Schrägstrichkommentar entfernt (z. B. //comment), und ein Slash-Sternchen-Kommentar bleibt erhalten (z. B. /* comment */).  Verwenden Sie den doppelten Schrägstrich für Kommentare, die Sie auf der nicht kompilierten Seite möchten, und den Schrägstrich (Stern) für Kommentare, die nach der Kompilierung sichtbar sein sollen.

Nur eine Anmerkung: Wenn Sie minimierte kompilieren, werden alle Kommentare entfernt.


Fazit

Jeder CSS-Präprozessor, den wir behandelt haben (Sass, LESS und Stylus), verfügt über eine eigene Methode, um dieselbe Aufgabe zu erfüllen. Entwickler können damit nützliche, nicht unterstützte Funktionen nutzen, während die Browserkompatibilität und die Sauberkeit des Codes erhalten bleiben.

Preprozessoren sind zwar keine Voraussetzung für die Entwicklung, können jedoch viel Zeit sparen und verfügen über sehr nützliche Funktionen.

Ich möchte Sie alle dazu ermutigen, so viele Präprozessoren wie möglich zu testen, damit Sie effektiv einen Favoriten auswählen können und wissen können, warum er den zahlreichen anderen vorgezogen wird.  Wenn Sie noch nicht mit einem Präprozessor versucht haben, Ihr CSS zu schreiben, empfehle ich Ihnen dringend, es auszuprobieren.

Haben Sie eine Lieblings-CSS-Präprozessor-Funktion, die ich nicht erwähnt habe?  Kann man etwas tun, was ein anderer nicht kann?  Lass es uns in den Kommentaren wissen!

Ein besonderer Dank geht an Karissa Smith, eine super talentierte Freundin von mir, die das Vorschaubild für diesen Artikel erstellt hat.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.