Sass 變數
Sass 變數
變數是儲存資訊的一種方式，以後可以重用。
使用 Sass，您可以將資訊儲存在變數中，例如
- strings
- 數字
- 顏色
- 布林值
- 列表
- 空值
Sass 使用 $ 符號，後跟一個名稱，來宣告變數
Sass 變數語法
$variableName: value;
下面的示例聲明瞭四個名為 myFont、myColor、myFontSize 和 myWidth 的變數。宣告變數後，您可以在任何地方使用這些變數
SCSS Syntax（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 Output（CSS 輸出）
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
#container {
width: 680px;
}
Sass 變數作用域
Sass 變數僅在定義它們的巢狀級別可用。
看下面的例子
SCSS Syntax（SCSS 語法）
$myColor: red;
h1 {
$myColor: green;
color: $myColor;
}
p {
color: $myColor;
}
<p> 標籤內的文字顏色是紅色還是綠色？它是紅色的！
另一個定義，$myColor: green; 位於 <h1> 規則內，並且僅在那裡可用！
因此，CSS 輸出將是
CSS Output（CSS 輸出）
h1 {
color: green;
}
p {
color: red;
}
好的，這就是變數作用域的預設行為。
使用 Sass !global
可以透過使用 !global 開關來覆蓋變數作用域的預設行為。
!global 表示一個變數是全域性的，這意味著它可以被所有級別訪問。
檢視以下示例（與上面相同；但添加了 !global）
SCSS Syntax（SCSS 語法）
$myColor: red;
h1 {
$myColor: green !global;
color: $myColor;
}
p {
color: $myColor;
}
現在 <p> 標籤內的文字顏色將是綠色的！
因此，CSS 輸出將是
CSS Output（CSS 輸出）
h1 {
color: green;
}
p {
color: green;
}
提示：全域性變數應在任何規則之外定義。最好將所有全域性變數定義在自己的檔案中，命名為 "_globals.scss"，然後使用 @include 關鍵字包含該檔案。
