Sass-Übersicht

Was Sie wissen sollten

Bevor Sie fortfahren, sollten Sie sich mit folgendem vertraut machen:

  • HTML
  • CSS

Wenn Sie diese Themen zunächst lernen möchten, besuchen Sie unsere Startseite Besuchen Sie diese Tutorials.

Was ist Sass?

  • Sass bedeutet Syntactically Awesome Stylesheet (grammatisch fantastische Stilblätter)
  • Sass ist eine Erweiterung von CSS
  • Sass ist ein CSS-Präprozessor
  • Sass ist vollständig kompatibel mit allen Versionen von CSS
  • Sass reduziert die Wiederholungen in CSS, was Zeit spart
  • Sass wurde von Hampton Catlin entworfen und von Natalie Weizenbaum 2006 entwickelt
  • Sass kann kostenlos heruntergeladen und verwendet werden

Warum Sass verwenden?

Stilblätter werden immer größer, komplexer und schwerer zu warten. Dies ist der Ort, wo CSS-Präprozessoren helfen können.

Sass ermöglicht es Ihnen, Eigenschaften zu verwenden, die in CSS nicht existieren, wie Variablen, verschachtelte Regeln, Mixins, Importe, Vererbung, eingebettete Funktionen und andere Funktionen.

Ein einfaches Beispiel, das Sass sehr nützlich macht

Angenommen, wir haben eine Website mit drei Hauptfarben:

#a2b9bc
#b2ad7f
#878f99

Wie oft müssen Sie diese HEX-Werte eingeben? Viele Male. Was passiert, wenn sich gleiche Farben ändern?

Sie können den folgenden Sass-Code verwenden, anstatt die obigen Werte mehrmals einzugeben:

Sass-Beispiel

/* Definition der Variablen für den ursprünglichen Farbton */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* Verwendung von Variablen */
.main-header {
  background-color: $primary_1;
}
.menu-left {
  background-color: $primary_2;
}
.menu-right {
  background-color: $primary_3;
}

Somit, wenn der ursprüngliche Farbton bei der Verwendung von Sass ändert, müssen Sie ihn nur an einem Ort ändern.

Wie funktioniert Sass?

Browser verstehen Sass-Code nicht. Daher benötigen Sie einen Sass-Präprozessor, um Sass-Code in Standard-CSS zu konvertieren.

Dieser Prozess wird als Übersetzung (Transpiling) bezeichnet. Daher müssen Sie Sass-Code für den Übersetzer (eine Art Programm) bereitstellen und dann CSS-Code abrufen.

Tipp:Die Übersetzung ist ein Begriff, der verwendet wird, um Quellcode, der in einer Sprache geschrieben ist, in eine andere Sprache zu übersetzen oder zu konvertieren.

Sass-Dateityp

Die Dateierweiterung für Sass-Dateien ist ".scss".

Sass-Kommentare

Sass unterstützt standardmäßige CSS-Kommentare /* Kommentar */Außerdem unterstützt Sass auch Inline-Kommentare // Kommentar:

Sass-Beispiel

/* Definition der Hauptfarben */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* Verwendung von Variablen */
.main-header {
  background-color: $primary_1; // Sie können hier eine Inline-Kommentar hinzufügen
}