SASS Schnellstart – Variablen

Wenn du nie eine der anderen Fähigkeiten von Sass nutzt, würden Variablen ausreichen, um den zusätzlichen Schritt des Transpilierens deines CSS zu rechtfertigen. Wir haben uns bereits angesehen, warum Variablen so nützlich sind. Nun wollen wir uns genauer ansehen, wie man sie deklariert.

Die grundlegende Syntax für die Definition einer Variable ist einfach: Verwende einfach ein $ vor dem Variablennamen und behandle ihre Definition wie eine CSS-Regel:

$<Variablenname>:<Wert>;

Das Folgende deklariert eine Variable namens large-font.

$large-font: 50px;

Sobald sie deklariert wurde, kannst du die Variable so verwenden, als würdest du die Variable eintippen:

$large-font: 50px;

p { font-size: $large-font; }

Der Sass-Transpiler (Source-to-Source Compiler) wird das Ersetzen für dich übernehmen:

p { font-size: 50px; }

Es gibt nur einen wichtigen Hinweis beim Deklarieren von Variablen: Ein Bindestrich und ein Unterstrich sind austauschbar. Schau dir das folgende Beispiel an.

$main-color: red;

p { color: $main-color; /* Variable mit Bindestrich */ }

a { farbe: $main_color; /* Variable mit Unterstrich */ }

Geltungsbereich (Scope)

Wie jede moderne Programmiersprache unterstützen auch Sass-Variablen das Konzept des Geltungsbereichs: Variablen sind nur auf der Ebene der Verschachtelung verfügbar, auf der sie definiert sind. Schauen wir uns ein Beispiel an:

$main_color: red;

p { 
   $main-color: blue; 
   color: $main-color; }

a { 
   color: $main-color; 
}

Kannst du herausfinden, welche Farbe der Text innerhalb eines <a>-Tags haben wird?

Lösung: Jep, der Text ist rot! Die zweite Definition, $main-color: blue; befindet sich innerhalb der Regel für den <p>-Tag und ist nur dort verfügbar.

Das Folgende ist "transpiliertes" CSS.

p { color: blue; }

a { color: red; }

Das ist das Standardverhalten. Du kannst es überschreiben, indem du den !global Switch benutzt:

$main-color: red;

p { 
   $main-color: blue !global; 
   color: $main-color; 
}

a { 
   color: $main-color;
   }

Das obige Beispiel führt dazu, dass der CSS-Code wie folgt aussehen wird:

p { color: blue; }

a { color: blue; }

In diesem Code wird der Text innerhalb des <a>-Tags blau sein. Aber der !global Schalter, wie auch seine Geschwister !important und !default, haben Nebeneffekte, die schwer vorherzusagen oder zu debuggen sind, also verwende sie mit Vorsicht.

Als generelle Regel gilt: Wenn du eine Variable auf "global" setzen willst, definiere sie außerhalb der Regeln.

Die beste Praxis ist es, deine globalen Variablen in einer einzigen Datei zu definieren, die du _globals.scss nennst, und sie mit @include überall dort einzubinden, wo sie benötigt wird.

Das waren die wichtigsten Informationen zu SASS-Variablen. In der nächsten Lektion geht es um Interpolation.