Sass 变量 - 菜鸟教程

定义和使用

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

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

strings 字符串
numbers 数值
colors 颜色
booleans 布尔值
lists 列表值
nulls 空值

Sass 使用 $ 符号，后跟名称来声明变量：

$variablename:value;

以下示例声明了四个名为 myFont，myColor，myFontSize 和 myWidth 的变量；声明变量后，可以在任何需要的地方使用变量：

$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 变量仅在定义它们的嵌套级别可用。

看下面的例子：

$myColor: red;

h1 {
  $myColor: green;
  color: $myColor;
}

p {
  color: $myColor;
}

<p> 标记内的文本颜色是红色还是绿色？它会变成红色！

另一个定义，$myColor:green; 在 <h1> 规则内，并且仅在此处可用！

因此，CSS 输出将是：

h1 {
  color: green;
}

p {
  color: red;
}

好的，这是变量作用域的默认行为。

Sass !global 全局变量

可以使用 !global 开关覆盖变量作用域的默认行为。

!global 表示变量是全局变量，这意味着可以在所有级别上访问它。

请看下面的示例（与上面相同；但是添加了 !global）：

$myColor: red;

h1 {
  $myColor: green !global;
  color: $myColor;
}

p {
  color: $myColor;
}

现在，<p> 标记内的文本颜色将变为绿色！

因此，CSS 输出将是：

h1 {
  color: green;
}

p {
  color: green;
}

提示：全局变量应在任何规则之外定义。最好在自己的名为 “_globals.scss” 的文件中定义所有全局变量，并使用 @include 关键字包含该文件。