Summary  
This chapter explains how to declare and use variables in Sass for storing and reusing style values, making code more maintainable and easy to update.

General domain of usage  
CSS preprocessing in front-end web development

Die erste nützliche Funktion ist die Existenz von Variablen. Werte können gespeichert und im gesamten Code wiederverwendet werden. Dies ähnelt Programmiersprachen, in denen eine Variable einmal erstellt und mehrfach verwendet werden kann. Um eine Variable zu deklarieren, wird ein Dollarzeichen (`$`) vor den Variablennamen gesetzt, anschließend folgt ein Doppelpunkt (`:`) und der Wert.
```css
$textPrimaryColor: #49423c;
```

>Hinweis
>
> Jede Namenskonvention kann verwendet werden, sei es Kebab Case (`text-primary-color`), Snake Case (`text_primary_color`) oder Camel Case (`textPrimaryColor`). Wichtig ist, innerhalb des Projekts eine einheitliche Namenskonvention zu verwenden.

Stellen wir uns vor, wir müssen ein Markup erstellen, in dem die gesamte Textfarbe `#474943` und die Schriftgröße `24px` beträgt. Die Sass-Datei würde wie folgt aussehen:
```css
$textColor: #474943;
$textFontSize: 24px;

p {
  color: $textColor;
  font-size: $textFontSize;
}
```

Wir halten Variablennamen stets so beschreibend wie möglich, damit klar ist, wofür jede Variable zuständig ist.

Der Vorteil besteht darin, dass spätere Designänderungen am Projekt erleichtert werden. Ändern sich beispielsweise die Schriftgröße oder die Farbe des Textes, können die Werte der Variablen `$textColor` und `$textFontSize` angepasst werden, wodurch das gesamte Projekt entsprechend aktualisiert wird.

Mit welchem Zeichen wird eine Sass-Variable deklariert?

Verbessern Sie Ihre Styling-Fähigkeiten durch das Beherrschen fortgeschrittener CSS-Techniken für modernes Webdesign. Positionieren und verwalten Sie Elemente präzise mit fortgeschrittenen Positionierungsstrategien. Erstellen Sie fließende Übergänge und ansprechende Animationen zur Verbesserung der Benutzererfahrung. Transformieren und manipulieren Sie Elemente für dynamische visuelle Effekte. Entwickeln Sie responsive Designs, die sich an verschiedene Geräte anpassen, und optimieren Sie Ihren Workflow mit CSS-Präprozessoren wie Sass.

Erfahren Sie, was Lernende von diesem Kurs zu fortgeschrittenem HTML- und CSS-Styling erwarten können. Welche Vorkenntnisse sind vor Kursbeginn erforderlich? Welche Themen werden behandelt?

Elemente auf Webseiten positionieren und verwalten. Verschiedene Positionierungseigenschaften kennenlernen, den Stapelreihenfolge nutzen, um die Sichtbarkeit überlappender Elemente zu steuern, und schließlich den Umgang mit Überlauf von Inhalten beherrschen.

Untersuchung der Leistungsfähigkeit von Übergängen und Möglichkeiten zur Verbesserung der Benutzererfahrung. Erläuterung, wie Eigenschaften fließend und schrittweise animiert werden, um nahtlose Zustandsübergänge zu ermöglichen.

Erfahren Sie mehr über die Eigenschaft „animation“ und deren Einsatz zur Erstellung dynamischer und ansprechender Designs. Entdecken Sie die Erstellung komplexer Animationen mit Keyframes sowie die Steuerung der Animation.

Untersuchung der Transformations-Eigenschaft, die das Modifizieren von Aussehen und Position von Elementen auf einer Webseite ermöglicht. Skalierung, Rotation, Schrägstellung und Verschiebung von Elementen in zwei und drei Dimensionen. Kombination mehrerer Transformationen zur Erzeugung komplexerer Effekte.

Die Prinzipien und Techniken des adaptiven/responsiven Designs zielen darauf ab, Websites und Anwendungen auf verschiedenen Geräten, Bildschirmgrößen und Ausrichtungen zugänglich und optisch ansprechend zu gestalten.

Erfahren Sie mehr über Präprozessoren in CSS und wie sie dabei helfen, effizienteren und besser wartbaren Code zu schreiben. Verstehen Sie, wie Präprozessoren den Arbeitsablauf vereinfachen und saubereren CSS-Code generieren können.

Verwendung von Sass-Variablen für Wiederverwendbare Stile

Awesome!

Verwendung von Sass-Variablen für Wiederverwendbare Stile