Sass 变量

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

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

• 字符串
• 数字
• 颜色
• 布尔值
• 列表
• null

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;
}

$myColor: red;

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

p {
  color: $myColor;
}

h1 {
  color: green;
}

p {
  color: red;
}

$myColor: red;

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

p {
  color: $myColor;
}

h1 {
  color: green;
}

p {
  color: green;
}