Sass 變量

Sass 變量

變量是一種存儲信息的方式，您可以在以后重復使用它。

通過 Sass，您可以將信息存儲在變量中，例如：

  • 字符串
  • 數字
  • 顏色
  • 布爾值
  • 列表
  • null

Sass 使用 $ 符號后跟名稱來聲明變量：

Sass 變量語法：

$variablename: value;

下面的例子聲明了 4 個變量：

  • myFont
  • myColor
  • myFontSize
  • myWidth

聲明變量后，您可以在任意位置使用這些變量：

SCSS 語法：

$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 輸出：

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

Sass 變量范圍

Sass 變量僅在定義它們的嵌套級別上可用。

請看下面的例子：

SCSS 語法：

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

<p> 標簽內的文本顏色是紅色還是綠色？是紅的！

另一個定義，$myColor: green; 位于 <h1> 規則內，并且只在那里可用！

所以，CSS 輸出將是：

CSS 輸出：

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

好的，這是變量作用域的默認行為。

使用 Sass !global

可以使用 !global 開關覆蓋變量作用域的默認行為。

!global 指示變量是全局的，這意味著它可以在所有級別上被訪問。

請看下面的例子（與上面相同，但添加了 !global）：

SCSS 語法：

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

現在 <p> 標簽內的文本顏色將是綠色！

所以，CSS 輸出將是：

CSS 輸出：

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

提示：應該在任何規則之外定義全局變量。明智的做法是在其自己的文件中定義所有全局變量，名為 "_globals.scss"，并使用 @include 關鍵字包含該文件。