前端必知必会-Sass变量

文章目录

• Sass 变量
• • Sass 变量范围
  • 使用 Sass !global
• 总结

Sass 变量

变量是一种存储信息的方式，以后您可以重复使用这些信息。

使用 Sass，您可以将信息存储在变量中，例如：

• 字符串
• 数字
• 颜色
• 布尔值
• 列表
• 空值
  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 变量仅在定义它们的嵌套级别可用。
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 关键字包含该文件可能是明智之举。

总结

本文介绍了Sass变量的使用，如有问题欢迎私信和评论