Sass-Variablen

Variablen werden verwendet, um Informationen zu speichern, die wiederverwendet werden können.

Sass-Variablen können die folgenden Informationen speichern:

  • Zeichenketten
  • Zahlen
  • Farbwerte
  • Boolesche Werte
  • Listen
  • null-Werte

Verwendung von Sass-Variablen$Symbol:

$variablename: value;

Das folgende Beispiel legt vier Variablen fest: myFont, myColor, myFontSize und myWidth.

Nach der Deklaration der Variablen können wir sie im Code verwenden:

Sass-Code:

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;

body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}

#container {
  width: $myWidth;
}

Konvertieren Sie den obigen Code in CSS-Code, wie unten gezeigt:

CSS-Code:

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

#container {
  width: 680px;
}

Sass-Gültigkeitsbereich

Der Gültigkeitsbereich einer Sass-Variable gilt nur auf der aktuellen Ebene. Beispielsweise ist der Stil von h1 grün, wie darin definiert, während das p-Tag rot ist.

Sass-Code:

$myColor: red;

h1 {
  $myColor: green;   // Nur innerhalb von h1 nützlich, lokaler Gültigkeitsbereich
  color: $myColor;
}

p {
  color: $myColor;
}

Konvertieren Sie den obigen Code in CSS-Code, wie unten gezeigt:

CSS-Code:

h1 {
  color: green;
}

p {
  color: red;
}

!global

Natürlich können wir in Sass das Schlüsselwort!globalverwenden, um eine Variable als global festzulegen:

Sass-Code

$myColor: red;

h1 {
  $myColor: green !global;  // Globaler Gültigkeitsbereich
  color: $myColor;
}

p {
  color: $myColor;
}

Jetzt wird der Stil des p-Tags grün.

Konvertieren Sie den obigen Code in CSS-Code, wie unten gezeigt:

CSS-Code

h1 {
  color: green;
}

p {
  color: green;
}

Hinweis:Alle globalen Variablen werden in der Regel in derselben Datei definiert, zum Beispiel:_globals.scss, dann verwenden wir@includeum die Datei einzubinden.

Andere Erweiterungen