局部变量和全局变量

从 3.4 版本开始，Sass 已经可以正确处理作用域的概念，并通过创建一个新的局部变量来代替。

先来看一下代码例子：

//SCSS
$color: blue !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
.box1 {
  color: $color;//调用全局变量
}
p {
  $color: red;//定义局部变量
  a {
    color: $color;//调用局部变量
  }
}
.box2 {
  color: $color;//调用全局变量
}

css 的结果：

//CSS
.box1 {
  color: blue;
}
p a {
  color: red;
}
.box2 {
  color: blue;
}

上面的示例演示可以得知，在元素内部定义的变量不会影响其他元素。如此可以简单的理解成全局变量就是定义在元素外面的变量，如下代码：

$color:orange !default;

$color 就是一个全局变量，而定义在元素内部的变量，比如 $color:red; 是一个局部变量。

除此之外，Sass 现在还提供一个 !global 参数。!global 和 !default 对于定义变量都是很有帮助的。

现在我们来试试 !global 参数

//SCSS
$color: blue ;
.stage {
  color: $color;
}
p {
  $color: red !global;
  a {
    color: $color;
  }
}
div {
  color: $color;
}

我们把!global参数设置到局部变量上，div调用$color,也会被赋值为 red。

Sass 互动版

局部变量和全局变量