Sass 变量

Sass 变量

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

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

• strings
• numbers
• colors
• booleans
• lists
• nulls

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

Sass 变量语法:

$<i>variablename</i>:  value ;

以下实例声明了名为 myFont、myColor、myFontSize 和 myWidth 的 4 个变量。声明变量后，您可以在任何地方使用这些变量：

Sass 语法:

$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 语法:

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

<p> 标签内的文本颜色是红色还是绿色？它将是红色的！

另一个在 <h1>规则中定义的 $myColor : green; 并且仅在那里可用！

因此，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;
}