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

看下面的例子：

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

运行示例 »

现在 a 中文本的颜色<p>标签将是绿色的！

因此，CSS 输出将是：

CSS 输出：

h1 {
color: green;
}

p {
color: green;
}

提示：全局变量应该在任何规则之外定义。明智的做法是在自己的文件中定义所有全局变量，名为"_globals.scss"，并包含带有@包括关键字。