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
关键字包含该文件。