Sass 教程
/ 變量
變量
Sass 變量
變量是一種存儲(chǔ)信息的方式，您可以在以后重復(fù)使用它。
通過(guò) Sass，您可以將信息存儲(chǔ)在變量中，例如：
- 字符串
- 數(shù)字
- 顏色
- 布爾值
- 列表
- null
Sass 使用 $ 符號(hào)后跟名稱(chēng)來(lái)聲明變量：
Sass 變量語(yǔ)法：
$variablename: value;
下面的例子聲明了 4 個(gè)變量：
myFontmyColormyFontSizemyWidth
聲明變量后，您可以在任意位置使用這些變量：
SCSS 語(yǔ)法：
$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;
body {
font-family: $myFont;
font-size: $myFontSize;
color: $myColor;
}
#container {
width: $myWidth;
}
因此，當(dāng) Sass 文件被轉(zhuǎn)譯時(shí)，它會(huì)使用變量（myFont、myColor 等），并輸出普通 CSS 和放置在 CSS 中的變量值，如下：
CSS 輸出：
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
#container {
width: 680px;
}
Sass 變量范圍
Sass 變量?jī)H在定義它們的嵌套級(jí)別上可用。
請(qǐng)看下面的例子：
SCSS 語(yǔ)法：
$myColor: red;
h1 {
$myColor: green;
color: $myColor;
}
p {
color: $myColor;
}
<p> 標(biāo)簽內(nèi)的文本顏色是紅色還是綠色？是紅的！
另一個(gè)定義，$myColor: green; 位于 <h1> 規(guī)則內(nèi)，并且只在那里可用！
所以，CSS 輸出將是：
CSS 輸出：
h1 {
color: green;
}
p {
color: red;
}
好的，這是變量作用域的默認(rèn)行為。
使用 Sass !global
可以使用 !global 開(kāi)關(guān)覆蓋變量作用域的默認(rèn)行為。
!global 指示變量是全局的，這意味著它可以在所有級(jí)別上被訪問(wèn)。
請(qǐng)看下面的例子（與上面相同，但添加了 !global）：
SCSS 語(yǔ)法：
$myColor: red;
h1 {
$myColor: green !global;
color: $myColor;
}
p {
color: $myColor;
}
現(xiàn)在 <p> 標(biāo)簽內(nèi)的文本顏色將是綠色！
所以，CSS 輸出將是：
CSS 輸出：
h1 {
color: green;
}
p {
color: green;
}
提示：應(yīng)該在任何規(guī)則之外定義全局變量。明智的做法是在其自己的文件中定義所有全局變量，名為 "_globals.scss"，并使用 @include 關(guān)鍵字包含該文件。