SCSS - Variablen

1. Definition

Das habe ich ja eben schon gezeigt. Einfach ein $ an den Anfang und das war's. Kommen wir nun den Feinheiten. Fangen wir mit der Bezeichnung an. Da gelten dieselben Regeln wie bei PHP. Einzige Ausnahme: der Bindestrich ist erlaubt.

2. Geltungsbereich

Auch das orientiert sich an den gängigen Programmiersprachen. Variablen sind nur dann global verfügbar, wenn sie außerhalb von Selektoren stehen.

$color: #f00;
p {
  $border: 1px solid #000;  
  /* $color verfügbar */
  color: $color;  
}
div {
  /* $color verfügbar */
  color: $color;
  /* $border NICHT verfügbar */
  border: $border;  
}

Praktischerweise wirft der Kompiler hier eine Warnung aus, dass $border nicht definiert wurde. Das sieht man dann an der rosaroten Fehlermeldung rechts unten im Monitor.

global

Genau wie in PHP gibt es diese Unsitte bei SCSS. Dafür muss man einfach ein !global anfügen und die Variable ist auch außerhalb der Selektoren verfügbar.

p {
  $border: 1px solid #000 !global;
}
div {
  /* $border verfügbar */
  border: $border;  
}

Wer damit arbeitet, wird erschossen!

3. Eine Besonderheit

... gibt es bei den Media-Queries. Denn da kann man praktisch die gesamte Bedingung definieren.

$phone: "only screen and (max-width : 360px)";
$desktop: "only screen and (min-width : 768px)";

Allerdings sieht die Zuweisung dann ein wenig anders aus.

@media #{$phone} {
    ...
}

4. Was nicht geht

Wenn man eine komplette Anweisung als Variable definiert. Da hat dann der Kompiler was zu mosern.

/* Fehler */>
$border: border: 1px solid #000;
div {
  $border
}

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt