CSS-Präprozessor: SASS

Von Mariya Videva 26-11-2020 Selbst gemacht, Programmierung, UI / UX-Design 11 Minuten

Wenn man mit CSS eine große und umfangreiche Website programmiert, kann das recht schnell ziemlich umständlich werden. Man wiederholt sich oft und schreibt langen, komplizierten und unordentlichen Code. Das Debuggen großer CSS-Seiten kann sich manchmal als echter Albtraum entpuppen. Um hiergegen etwas zu tun, setzen viele Frontend-Entwickler CSS-Präprozessoren ein, von denen SASS der beliebteste und bevorzugte ist.

Ein Präprozessor ist ein Programm, das als eine Art Mittelsmann zwischen einem Clientprogramm und dem Compiler fungiert. Es empfängt Input in einer bestimmten Sprache, verarbeitet ihn, übersetzt ihn und sendet Output in der Syntax einer anderen Sprache aus.

SASS (Syntactically Awesome Style Sheet) ist der Mittelsmann zwischen dem eigentlichen CSS und dem Compiler. Der Hauptzweck von SASS besteht darin, die Schwachstellen von herkömmlichem CSS-Code etwas zu kaschieren und die Syntax von CSS durch neue Anweisungen zu erweitern. Auch wenn ein Entwickler in der SASS-Syntax schreibt, ist die Ausgabe mit allen CSS-Versionen kompatibel und funktioniert gut mit jeder Website.

Ruby, das in SASS geschrieben wurde und häufig als 'CSS mit Superkräften' bezeichnet wird, ist eine grundlegende Programmiersprache. Sie erweitert die Funktionalität von CSS, indem sie die Paradigmen der traditionellen Programmierung wie Funktionen, Schleifen, Variablen, Verschachtelung von Mixins, Vererbung und so viel mehr mit sich bringt. Wenn du dich fragst oder Angst davor hast, SASS zu benutzen, weil es eine neue Programmiersprache ist, solltest du das nicht tun. An sich ist SASS sehr grundlegend und übernimmt größtenteils die Form von CSS. Wenn du gute CSS-Kenntnisse hast, wirst du auch mit SASS super zurechtkommen.

SASS vs SCSS

SASS hat zwei Syntaxen. SASS, eine eigene Syntax und einen eigenen Präprozessor, und SCSS (SASSy CSS) ist eine weitere Syntax des SASS-Präprozessors. Beide haben den gleichen Präprozessor, und dass SASS eine Syntax ist. Der Präprozessor ist ein Grund, warum SCSS und SASS oft miteinander verwechselt werden. Die SCSS-Syntax ähnelt der von SASS und hat die gleiche Funktionalität. Beide erweitern die Features des normalen CSS. Es gibt jedoch gewisse Unterschiede zwischen ihnen.
Der SASS-Präprozessor ist Ruby-basiert. Die Syntax von SASS übernimmt den Stil von Ruby, strenge Einrückung, keine Semikolons und keine geschweiften Klammern. SCSS hingegen wurde entwickelt, um die Lücke zwischen der CSS- und der SASS-Syntax zu schließen. SCSS erhielt seinen Namen 'SASSy CSS', weil es mehr CSS-Features schafft und trotzdem seine Kernfeatures beibehält. Genau wie CSS verwendet SCSS geschweifte Klammern und Semikolons. Jede gültige CSS-Datei ist auch eine gültige SCSS-Datei - es wird funktionieren, nachdem die Dateierweiterung von .css in .SASS geändert wurde. Die umgekehrte Aktion ist jedoch nicht möglich.

Hier ist ein einfacher Code, der den Unterschied zwischen der Syntax von SASS und SCSS zeigt.

SCSS

div { 
  border: 2px; 
  background: red; 
}

SASS

div 
  : border 2px 
  : background green

Während SCSS wie reguläres CSS geschrieben wird, setzt die SASS-Syntax den Doppelpunkt als Präfix für Property-Namen. Es benutzt neue Zeilen zur Abgrenzung von Ausdrücken anstelle von Semikolons. Es benutzt auch Einrückungen, um Selektoren von Eigenschaftsnamen und ihren Werten abzugrenzen (anstelle von geschweiften Klammern).
Obwohl SCSS das jüngere und neuere der beiden ist, ist es populärer und weit verbreiteter als SASS. Das liegt an der CSS-freundlichen Natur von SCSS. Für die Beispiele in diesem Artikel werden wir SCSS verwenden, da es näher an CSS als SASS liegt und außerdem einfacher zu verstehen ist.

SASS INSTALLIEREN

Um SASS zu nutzen, musst du Ruby installieren und es auf der Kommandozeile installieren. Du kannst auch Anwendungen von Drittanbietern wie CodeKit, PrePos, Hammer, Scout-App und Ghostlab verwenden, um es zum Laufen zu bringen. Schau dir die offizielle SASS-Dokumentation an - https://SASS-lang.com/install . Hier werden dir verschiedene Möglichkeiten gezeigt, wie du SASS installieren und ausführen kannst.
SASS ist läuft auf allen Betriebssystemen. Es läuft also beispielsweise auf Linux, Windows und Mac. Außerdem unterstützt es alle gängigen Browser. Edge, Chrome, Opera, Safari und Firefox. Dadurch ist es für jeden Entwickler, der etwas lernen möchte, leicht zugänglich.

FEATURES VON SASS

Wie bereits erwähnt, erweitert SASS die CSS-Features. Diese Features und wie sie dein CSS leistungsfähiger und einfacher zu warten machen, werden nun wir uns ansehen.

Variablen

Der Zweck einer Variable in SASS ist derselbe wie beim regulären Programmieren. Sie erlaubt es dir, Werte zu speichern, die im Laufe des Programms häufig verwendet werden. Eigenschaften wie Farbe und Schriftarten sind die häufigsten und wiederkehrenden in einem Stylesheet. Sie können als Variablen in SASS gespeichert werden, so dass sie vom Entwickler beliebig wiederverwendet werden können, ohne sie jedes Mal auszuschreiben.

SCSS verwendet ein Dollarzeichen-Symbol ($) als Präfix für die Variablennamen.

In CSS könnte ich zum Beispiel folgendes in meinem Code verwenden.

  font-size: 16px; 
  background-color: #000000; 
  color: red;

Jedes Mal, wenn ich das benutzen will, muss ich es explizit umschreiben.

In SCSS kann das folgendermaßen aussehen.

$bgcolor: #000000; 
$fontsize: 16px; 
$fontstack: Arial, Sans-serif; 
$mywidth: 700px; 

body{ 
  font-family: $fontstack; 
  background-color: $bgcolor; 
} 

div { 
  font-size: $fontsize; 
  width: $mywidth; 
  font-family: $fontstack; 
}

Man könnte nun sagen, dass CSS id und Klassenselektoren Wiederholungen natürlich reduzieren. Das tun sie, aber ganz weg sind sie eben auch nicht. Außerdem möchte ich vielleicht gar keine Klasse oder Id einem bestimmten Element zuweisen, weil es mehr als die Eigenschaften haben könnte, die ich brauche. Mehr Stile für bestimmte Selektoren zu schreiben, macht den Code noch komplizierter.

Verschachtelung

Verschachtelte Codes sind Codes innerhalb eines anderen Codes. Verschachtelung ermöglicht es dir, die Hierarchie deiner HTML-Elemente und Zielelemente viel sauberer darzustellen. Es gibt dem Code eine bessere Struktur und macht es dir leicht, Elemente während des Debuggens zu finden.

Im normalen CSS wird der Code einzeln definiert, und er kann sich überall in der Datei befinden. Hier ein Beispiel:

nav ul { 
list-style: none; 
  margin: 0;
  text-align: right;
} 
nav li { 
  display: block;
}
nav a { 
  padding: 2px 4px;
  text-decoration: none
}

This code snippet can be nested in SCSS as:

nav { 
  ul { 
    list-style: none; 
    margin: 0; 
    text-align: right; 
  }    
  li { 
    display: block; 
  } 
  a { 
      padding: 2px 4px; 
      text-decoration: none; 
  }
}

Die ul, li und a Selektoren werden innerhalb des nav im SCSS platziert, wodurch es lesbarer und besser organisiert aussieht.
Verschachtelte Codes sollten im SCSS spezifisch und unkompliziert sein. Eine ausgeklügelte Verschachtelung kann auch für Verwirrung sorgen und den Code schwierig zu lesen und zu warten machen. Anstatt einen erweiterten verschachtelten Code zu haben, kann der Code in verschiedenen kleinen Gruppen verschachtelt werden, um eine bessere Lesbarkeit zu ermöglichen.Wenn wir den Pseudoklassen in CSS Werte zuweisen, neigen wir dazu, die Selektoren und die Pseudoklassen zu wiederholen.

a { 
text-decoration: none; 
  color: #ffffff; 
} 
a:hover { 
  color: #000000; 
}

Im SCSS kann eine Verschachtelung & verwendet werden, um die Auswahl der oberen/äußeren Parents anzusprechen. Das heißt, es erkennt, dass ein Selektor in den obigen Zeilen angegeben wurde (Parent-Selektor), identifiziert ihn und ersetzt ihn in der folgenden inneren Auswahl. Der &-Selektor ermöglicht es, den Parent-Selektor auf vielfältigere Weise wiederzuverwenden, vor allem aber bei der Zuweisung von Werten an verschachtelte Pseudo-Klassen.
Der CSS-Code oben sieht in SCSS wie folgt aus:

a{ 
  text-decoration: none; 
  color: #ffffff; 
  &:hover{ 
    color: #000000; 
  } 
}

Mixins

Das Schöne an SASS ist, wie es CSS vereinfacht und Wiederholungen vermeidet. Mixins sind ein wesentlicher Aspekt von SASS, weil sie den Hauptzweck des SASS hervorheben - die Dinge einfach zu halten.
Mixins verhalten sich wie Funktionen, obwohl sie keine SASS-Funktionen sind. Sie erlauben es dir, wiederverwendbare Code-Blöcke zu schreiben, die auf deiner Seite wiederholt verwendet werden würden. Der Mixin kann ähnlich wie Funktionen auch Argumente aufnehmen. Ein Mixin wird mit der @mixin-Direktive definiert, und er kann überall in der Datei mit der @import-Direktive aufgerufen werden.
Ein wichtiger Bereich, in dem Mixins verwendet werden können, ist das Schreiben von Browser-Vendor-Prefixed Properties. Diese neigen dazu, sehr lang und repetitiv zu sein. Hier ist ein Beispiel für die Verwendung von Mixins.

@mixin border-radius($radius) { 
  -webkit-border-radius: $radius; 
  -moz-border-radius: $radius; 
  -ms-border-radius: $radius; 
  border-radius: $radius; 
}
div { 
  @include border-radius(20px); 
}

Normalerweise müssten in CSS Vendor-Präfixe immer wieder verwendet werden, wenn wir sie brauchen. Diese Bedingung ändert sich in SCSS, nachdem wir sie einmal mit @mixin definiert haben.
Hier ist ein weiteres Beispiel:

@mixin fontstack( $family: 'Ubuntu' , $weight: 400 , $style: normal ) { 
  font-family: $family , 'Arial', 'Helvetica', sans-serif; 
  font-style: $style; 
  font-weight: $weight; 
}

Beachte, dass Werte im Mixin deklariert wurden, so dass wir sie nicht noch einmal angeben müssen, wenn wir @import nutzen

div { 
  @include fontstack; 
  text-transform: uppercase; 
}

Das wird in Folgendes kompiliert

div { 
  font-family: 'Ubuntu', 'Arial', 'Helvetica', sans-serif; 
  font-style: normal; 
  font-weight: 400; 
  text-transform: uppercase; 
}

Import

Wie CSS erlaubt SASS die Verwendung der @import-Anweisung, um eine Datei in eine andere einzufügen. Jedoch übertrumpft die @import-Anweisung von SASS die @import-Anweisung von CSS deutlich. Bei der Verwendung von CSS-Import müssen HTTP-Anfragen für jede zu importierende Datei separat gestellt werden. Die SASS-@import-Direktive fasst alle ihre Dateien in einer einzigen CSS-Datei zusammen, so dass die HTTP-Anfrage nur einmal gemacht wird.

Anstatt eine lange SASS-Datei zu haben, kannst du verschiedene kleinere Dateien pflegen, die bestimmte Zwecke erfüllen, und sie mit der @import-Direktive in die Hauptdatei importieren. Nehmen wir an, wir haben eine SASS-Datei namens theme.scss und variables.scss.

@import "themes"; 
@import "variables";

Du könntest den obigen Code am Anfang der Datei hinzufügen. Dateierweiterungen werden nicht benötigt, da SASS automatisch annimmt, dass du entweder eine .scss-Datei oder eine .SASS-Datei hast, die beide akzeptabel sind.

Warum SASS?

Es gibt viele Gründe, SASS zu benutzen. Hier haben wir noch einmal die wichtigsten zusammengestellt:

Es hält den allgemeinen Code einheitlich.
Mit Variablen und Mixins werden Wiederholungen verhindert.
Änderungen können schnell und effizient durchgeführt werden.
Der Code ist einfacher zu lesen und zu pflegen.
Es ist eine sauberere, schlankere Form von CSS.
Es hat eine großartige Community und Dokumentation.

ABSCHLIEßENDE WORTE

Sowohl SASS als auch SCSS sind brauchbare CSS-Syntaxen für den SASS-Präprozessor. Wenn du dir nicht sicher bist, welche du verwenden oder lernen sollst, kannst du mit SCSS beginnen. SCSS-Dateien können mit SCSS-zu-SASS-Konvertern in SASS-Dateien umgewandelt werden, so dass du dir keine Sorgen machen musst, wenn du später noch umsteigen willst.

SASS ist nicht der einzige verfügbare CSS-Präprozessor. Andere CSS-Präprozessoren sind Less und Stylus. Obwohl SASS nicht in der offiziellen CSS-Dokumentation enthalten ist, wird es weithin akzeptiert und ist mit regulärem CSS kompatibel. Es hat seine eigene offizielle Dokumentation, einen Leitfaden und eine großartige Community, die dir dabei hilft.

CSS-Präprozessor: SASS