Verständnis der Sass-Syntax für Optimiertes CSS

Um Sass-Code zu schreiben, muss eine Datei mit der Endung .scss erstellt werden (z. B. feature.scss).

Die Sass-Syntax lässt sich am folgenden CSS-Code erläutern. Es wird ein Button mit einem Hover-Effekt gestaltet. Der CSS-Code dafür lautet:

.button {
  font-size: 24px;
  color: green;
  background-color: rebeccapurple;
}

.button:hover {
  background-color: darkmagenta;
}

Der gleiche Code in Sass-Syntax geschrieben:

.button {
  font-size: 24px;
  color: green;
  background-color: rebeccapurple;
  
  &:hover {
    background-color: darkmagenta;
  }
}

Der Unterschied besteht darin, dass die Stile für ein Element innerhalb des ersten Paares von {}-Klammern geschrieben werden. Außerdem wird der Klassenname des Elements nicht zweimal verwendet. Stattdessen kommt das kaufmännische Und-Zeichen (&) zum Einsatz.

Hinweis

Bei Fragen oder Unklarheiten zu bestimmten Sass-Funktionen wird dringend empfohlen, die Sass-Dokumentation zu nutzen.

Kompilierung

Browser verstehen keine Präprozessor-Syntax. Sie interpretieren nur HTML-, CSS- und JavaScript-Syntax. Wie funktioniert das also? Die Sass-Datei muss in eine CSS-Datei kompiliert werden. Nach der Kompilierung ist das Ergebnis sichtbar.

Es bestehen folgende Optionen, um Sass in CSS zu kompilieren:

• Verwendung der Visual Studio Code-Erweiterung – Live Sass Compiler;
• Verwendung der Anwendung – Scout App.