Um Sass-Code zu schreiben, müssen wir eine Datei mit der Erweiterung .scss erstellen. (z.B. feature.scss).

Betrachten wir die Sass-Syntax anhand des folgenden CSS-Codes. Wir werden den Button manipulieren, der einen Hover-Effekt haben wird. Wir schreiben den CSS-Code dafür:

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

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

Lassen Sie uns denselben Code in Sass-Syntax umschreiben:

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

Der Unterschied besteht darin, dass wir Stile für ein Element innerhalb des ersten Paares der {}-Klammern verwenden. Außerdem verwenden wir den Klassennamen des Elements nicht zweimal. Stattdessen verwenden wir das Kaufmanns-Und (&).

Hinweis

Bei Fragen oder Missverständnissen zu einigen Sass-Funktionen wird dringend empfohlen, die Sass-Dokumentation zu verwenden.

Kompilierung

Browser verstehen die Präprozessor-Syntax nicht. Sie verstehen nur HTML-, CSS- und JavaScript-Syntax. Also, wie funktioniert es? Wir müssen die Sass-Datei in die CSS-Datei kompilieren. Nach der Kompilierung werden wir das Ergebnis sehen.

Wir haben drei Optionen, um Sass in CSS zu kompilieren:

• Verwenden Sie die interaktive Sass-Plattform - sassmeister;
• Verwenden Sie die Visual Studio Code-Erweiterung - Live Sass Compiler;
• Verwendung der App - scout-app.