Sass变量

变量是存储稍后再使用的信息的一种方式，有了存储空间，您可以将信息存储在变量中，比如：

• 字符串（strings）
• 数字（numbers）
• 颜色（colors）
• 布尔运算（booleans）
• 列表（lists）
• 空值（nulls）

Sass使用 $ 符号后跟一个名称来声明变量。变量语法：$variablename: value;

// HTML 部分
Hello Xkd
变量
这是容器中的一些文本

// .scss 语法
// 声明变量
$font1: Helvetica, sans-serif;
$color1: green;
$fontSize1: 18px;
$padding1: 5px 10px;
body {
 font-family: $font1;
 font-size: $fontSize1;
 color: $color1;
}
#container {
 padding: $padding1;
}

// .css 输出
// 当编译Sass 文件时，它会获取变量（以上的font1、fontSize1、color1、paddin1等），然后输出正常的普通值，并将这些变量值放在CSS中
body {
 font-family: Helvetica, sans-serif;
 font-size: 18px;
 color: green;
 padding: 0 50px;
}
#container {
 border: 2px red solid;
 padding: 5px 10px;
}

Sass 可变范围

Sass变量仅在定义它们的嵌套级别可用。

// HTML 部分
Hello Xkd
变量

// scss 语法
$myColor: red;
h1 {
 $myColor: green;
 color: $myColor;
}
p {
 color: $myColor;
}

// css 输出
h1{
 color: green;
}
p{
 color: red;
}

标签内的文字颜色无论是红色还是绿色，它最后显示都会变红。

另一个定义是，$ myColor：green; 在

规则内，只有在那里可用，所以它在 css 中的输入如上所示。

使用 Sass！global

变量范围的默认行为可以通过使用 ！global 开关来覆盖变量作用域。

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

上面同样的例子，我们给 h1 添加一个 !global，那么原来定义的 $myColor:red; 这时候就失效了，它的颜色为green。

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

// 输出 css
h1 {
 color: green;
}
p {
 color: green;
}

提示：全局变量应该在任何规则之外定义。

明智的做法是在它自己的名为“_globals.scss”的文件中定义所有全局变量，并用@include关键字包含该文件。