变量命名规则

• 用符号 “$” 开头，后面跟随变量名称
• 变量名称需使用字母开头，中间可使用字母、数字、中横线（连接符）、下划线
• 支持大/小写字母

如果多个单词的连接，可以使用横线 -、下划线 _ 或驼峰式的命名形式，需要注意的是，如果同样的单词，分别采用横线与下划线来连接，此名称相当于是同一个名称，在解析时，会采用最后一个声明的变量来解析。因此在命名的时候建议统一使用一个符号。

$color: red;
$test-color: green;
$test_color: yellow;
$testColor: pink;

.container {
    color: $color;
    border-color: $test-color;
    background: $testColor;
}

编译后

.container {
  color: red;
  border-color: yellow;
  background: pink;
}

变量默认值

可以使用 !default 为每个变量设置一个默认值，如果该变量没有被重新定义过，则会将该变量解析为默认值，如果已经有过定义，则会取其已定义过的值。以下代码已经有定义过该变量，因此获取的是定义过的值，默认值不会覆盖之前已经定义过的值。

$color: #333;
$color: #666 !default;
.container {
    color: $color;
}

编译后

.container {
  color: #333;
}

变量作用域

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明。

// 全局变量
$font-size: 12px;

.container-1 {
    font-size: $font-size;
}

.footer-1 {
    font-size: $font-size;
}

.container-2 {
    // 局部变量
    $font-size: 14px;
    font-size: $font-size;
}

.footer-2 {
    // container-2中的局部变量获取不到，值取全局变量
    font-size: $font-size;
}

.container-3 {
    // `!global`局部变量全局化
    $font-size: 16px !global;
    font-size: $font-size;
}

.footer-3 {
    font-size: $font-size;
}

编译后

.container-1 {
  font-size: 12px;
}

.footer-1 {
  font-size: 12px;
}

.container-2 {
  font-size: 14px;
}

.footer-2 {
  font-size: 12px;
}

.container-3 {
  font-size: 16px;
}

.footer-3 {
  font-size: 16px;
}

问： 在.container-3中已经使用!global将局部变量全局化，而且从编译后的css中可以看到已经生效。为什么.container-1中还是font-size: 12px;

答： Scss 中不会变量提升，变量使用时，只会引用在此之前已经声明的值。