16. Unterrichtsblock

Sass & SCSS

Sass ist ein CSS-Präprozessor. Sass reduziert Wiederholungen von CSS und spart somit Zeit.
Sass-Dateien haben die Dateieendung „.sass“ oder „.scss“

Die Funktionen von SCSS und Sass sind genau dieselben, jedoch ist die Syntax anders. Bei Sass werden keine Klammern und Semikolons geschrieben, bei SCSS hingegen schon. SCSS ähnelt deshalb eher dem normalen CSS.

Im Gegensatz zu LESS (JavaScript basiert) basiert Sass auf Ruby.

Was ist Sass?

• Sass steht für Syntactically Awesome Style Sheet
• Sass ist eine CSS-Erweiterung
• Sass ist ein CSS-Präprozessor
• Sass ist vollständig kompatibel mit allen CSS-Versionen
• Sass reduziert Wiederholungen von CSS und spart somit Zeit beim Schreiben und Ausführen
• Sass wurde von Hampton Catlin entworfen und 2006 von Natalie Weizenbaum entwickelt
• Sass kann kostenlos heruntergeladen und verwendet werden

Vorteile von Präprozessoren allgemein

Präprozessoren erleichtern das Schreiben von Code, indem sie eine vereinfachte oder bessere Syntax bereitstellen als die Programmiersprache selbst, Aufgaben automatisieren und neue Funktionen bieten. Neben CSS-Präprozessoren wie Sass, existieren auch Präprozessoren für HTML (z. B. HAML) oder für JavaScript (z. B. CoffeeScript).

CSS-Präprozessoren bieten in diesem Zusammenhang u. a. folgende Vorteile:

1. Sie vereinfachen die Syntax, damit man Stylesheets schneller schreiben kann.
2. Sie helfen dabei, ein Projekt zu organisieren und in verständliche Sinnabschnitte zu unterteilen.
3. Sie erlauben Variablen, übernehmen die Berechnung von Layout-Abmessungen, generierten Farbsets usw.
4. Sie reduzieren die Anzahl von HTTP-Requests, da Stylesheets kombiniert werden können.
5. Sie automatisieren Arbeitsabläufe wie die Kompression von Dateien oder Stylesheets.

Warum sollte man Sass verwenden?

Mit Sass kann man Funktionen verwenden, die in CSS nicht vorhanden sind, wie Variablen, verschachtelte Regeln, Schleifen, Importe, Vererbung, integrierte Funktionen und andere Dinge.

/* Definieren von Standardvariablen für die Webseite */
$hintergrundfarbe: lightgreen;
$textfarbe: white;
$schriftgroesse: 18px;

/* Verwendung von Variablen */
body {
  background-color: $hintergrundfarbe;
  color: $textfarbe;
  font-size: $schriftgroesse;
} 

Für das Testen und Ausprobieren von Beispielen, öffne die Seite: https://www.sassmeister.com/

Ein einfaches Beispiel, warum Sass nützlich ist

Nehmen wir an, wir haben eine Website mit drei Hauptfarben:

#a2b9bc
#b2ad7f
#878f99

/*
  Wie oft muss man diese HEX-Werte im gesamten Webprojekt eingeben? Ziemlich Oft. Und was ist mit Variationen derselben Farben?
  Anstatt die obigen Werte oft einzugeben, ist es möglich Sass zu verwenden und Folgendes zu schreiben:
*/

/* Definieren von Variablen für die Hauptfarben */
$hauptfarbe_1: #a2b9bc;
$hauptfarbe_2: #b2ad7f;
$hauptfarbe_3: #878f99;

/* use the variables */
.main-header {
  background-color: $hauptfarbe_1;
}

.menu-links {
  background-color: $hauptfarbe_2;
}

.menu-rechts {
  background-color: $hauptfarbe_3;
}

// Wenn man also Sass verwendet und sich die Primärfarbe ändert, muss man diese nur an einer Stelle ändern.

Wie funktioniert Sass?

Ein Browser versteht keinen Sass-Code. Daher benötigt man einen Sass-Präprozessor, um Sass-Code in Standard-CSS umzuwandeln.

Dieser Vorgang wird als „Transpilieren“ bezeichnet. Man muss also einem Transpiler (ein Programm) Sass-Code geben, um anschließend CSS-Code zurückbekommen.

INFO: Transpilieren ist ein Begriff dafür, einen in einer Sprache geschriebenen Quellcode in eine andere Sprache zu transformieren/übersetzen.

Kommentare

Sass verwendet dieselben Kommentarfunktionen wie CSS

Installation von Sass

• Betriebssystem: Sass ist plattformunabhängig
• Browserunterstützung: Sass funktioniert in Edge/IE (ab IE 8), Firefox, Chrome, Safari, Opera
• Programmiersprache: Sass basiert auf Ruby
• Offizielle Seite: https://sass-lang.com/

Es gibt mehrere Möglichkeiten, Sass zu installieren. Es gibt einige Anwendungen, wie Sass für Mac, Windows und Linux zum Laufen gebracht werden kann. Einige davon sind kostenlos, andere sind kostenpflichtige Apps.

Es gibt auch die Möglichkeit Sass über die Kommandozeile zu installieren. Eine Anleitung existiert hier: https://kulturbanause.de/blog/sass-ueber-die-kommandozeile-installieren/

Sass-Variablen

Variablen sind eine Möglichkeit, Informationen zu speichern, die man später wiederverwenden möchte. Mit Sass ist es möglich Informationen in Variablen speichern, wie zum Beispiel:

• Strings
• Zahlen
• Farben
• Boolesche Werte
• Listen
• NULL

Sass verwendet das $-Symbol, gefolgt von einem Namen, um Variablen zu deklarieren:

$variablename: value;

Das folgende Beispiel deklariert 4 Variablen namens myFont, myColor, myFontSize und myWidth. Nachdem die Variablen deklariert sind, können Sie die Variablen verwenden, wo immer Sie wollen:

$schrift: Arial, sans-serif;
$schriftGroesse: 18px;
$weite: 1200px;
$farbe: lightgreen;

body {
  font-family: $schrift;
  font-size: $schriftGroesse;
  color: $farbe;
}

#container {
  width: $weite;
}

Wenn also die Sass-Datei transpiliert wird, nimmt sie die Variablen (farbe, schrift usw.) und gibt normales CSS mit den im CSS platzierten Variablenwerten wie folgt aus:

body {
  font-family: Arial, sans-serif;
  font-size: 18px;
  color: lightgreen;
}

#container {
  width: 1200px;
}

Sass-Variablenbereich

Sass-Variablen sind nur auf der Verschachtelungsebene verfügbar, auf der sie definiert sind.

$farbe: pink;

h1 {
  $farbe: lightgreen;
  color: $farbe;
}

// Welche Farbe hat die Schrift im <h1>-Tag?


p {
  color: $farbe;
}

// Welche Farbe hat die Schrift im <p>-Tag?

Sass !global

Das Standardverhalten für den Variablenbereich kann mithilfe der !global-Anweisung überschrieben werden.

!globalgibt an, dass eine Variable global ist, was bedeutet, dass sie auf allen Ebenen zugänglich ist.

$farbe: pink;

h1 {
  $farbe: lightgreen !global;
  color: $farbe;
}

// Welche Farbe hat die Schrift im <h1>-Tag?


p {
  color: $farbe;
}

// Welche Farbe hat die Schrift im <p>-Tag?

Tipp: Globale Variablen sollten außerhalb jeglicher Regeln definiert werden. Es könnte sinnvoll sein, alle globalen Variablen in einer eigenen Datei mit dem Namen „_globals.scss“ zu definieren und die Datei mit dem @include- Schlüsselwort einzubinden.