Sass 变量
Sass 变量
变量是一种存储信息的方式，以便以后重复使用。
使用 Sass，您可以将信息存储在变量中，例如
- 字符串
- 数字
- 颜色
- 布尔值
- 列表
- 空值
Sass 使用 $ 符号，后跟名称，来声明变量
Sass 变量语法
$变量名: 值;
以下示例声明了 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 输出
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
#container {
width: 680px;
}
Sass 变量作用域
Sass 变量仅在其定义的嵌套级别可用。
请查看以下示例
文本在 <p> 标签内的颜色是红色还是绿色？它是红色的！
另一个定义 $myColor: green; 在 <h1> 规则内，并且仅在该处可用！
因此，CSS 输出将是
CSS 输出
h1 {
color: green;
}
p {
color: red;
}
好的，这是变量作用域的默认行为。
使用 Sass !global
可以使用 !global 开关覆盖变量作用域的默认行为。
!global 指示变量是全局的，这意味着它可以在所有级别访问。
请查看以下示例（与上面相同；但添加了 !global）
现在，文本在 <p> 标签内的颜色将为绿色！
因此，CSS 输出将是
CSS 输出
h1 {
color: green;
}
p {
color: green;
}
提示：全局变量应在任何规则之外定义。明智的做法是在其自己的文件中定义所有全局变量，命名为“_globals.scss”，并使用 @include 关键字包含该文件。
