Sass-Variable

Sass-Variable

变量是一种存储信息的方式，您可以在以后重复使用它。

通过 Sass，您可以将信息存储在变量中，例如：

• 字符串
• 数字
• 颜色
• 布尔值
• 列表
• null

Sass 使用 $ 符号后跟名称来声明变量：

Sass 变量语法：

$variablename: value;

下面的例子声明了 4 个变量：

• myFont
• myColor
• myFontSize
• myWidth

声明变量后，您可以在任意位置使用这些变量：

SCSS-Syntax:

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;
body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}
#container {
  width: $myWidth;
}

因此，当 Sass 文件被转译时，它会使用变量（myFont、myColor 等），并输出普通 CSS 和放置在 CSS 中的变量值，如下：

CSS-Ausgabe:

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

Sass 变量范围

Sass 变量仅在定义它们的嵌套级别上可用。

请看下面的例子：

SCSS-Syntax:

$myColor: red;
h1 {
  $myColor: green;
  color: $myColor;
}
p {
  color: $myColor;
}

<p> Der Text innerhalb der Tags ist rot oder grün? Es ist rot!

Eine andere Definition, $myColor: green; befindet sich in <h1> innerhalb der Regel und ist nur dort verfügbar!

Also, die CSS-Ausgabe wird sein:

CSS-Ausgabe:

h1 {
  color: green;
}
p {
  color: red;
}

Gut, das ist das Standardverhalten des Variablenbereichs.

Verwenden Sie Sass !global

Man kann verwenden !global Switches überschreiben das Standardverhalten des Variablenbereichs.

!global weist darauf hin, dass die Variable global ist, was bedeutet, dass sie auf allen Ebenen zugänglich ist.

Sehen Sie sich untenes Beispiel an (wie oben, aber mit !global）：

SCSS-Syntax:

$myColor: red;
h1 {
  $myColor: green !global;
  color: $myColor;
}
p {
  color: $myColor;
}

Jetzt <p> Der Textfarbe innerhalb der Tags wird grün sein!

Also, die CSS-Ausgabe wird sein:

CSS-Ausgabe:

h1 {
  color: green;
}
p {
  color: green;
}

Tipp:Globale Variablen sollten außerhalb jeder Regel definiert werden. Es ist ratsam, alle globalen Variablen in eigenen Dateien zu definieren, die den Namen "_globals.scss" tragen, und zu verwenden @include Schlüsselwörter enthalten diese Datei.