Sass 变量的作用域

变量是最基础也最常用的东西，例如一段 CSS 中有很多相同的颜色值（例如 #050709），传统的 CSS 中，你就需要不断的去复制这个值，而在 Sass 中，你就可以先在对应文件头部（一般会有一个 var.scss 文件专门用来放置变量等）声明一个变量 $co : #050709 然后在后面需要使用这个颜色值的时候，就可以直接写上 color: $co; 就可以了。

不仅仅需要输入的字符少了，而且根据规则起变量名让人更加易懂，此外后期需要修改这一种颜色的时候，只需要修改一下变量值即可全部修改，不需要搜索替换了。

但是这里我们要讨论的是 Sass 中变量的作用域问题，即变量放置的位置先后、同名变量之间的相互影响问题。

使用下面这段代码即可进行测试：

$width: 10px;

.wrap{
    /*$width: 20px;*/
    .main{
        width: $width;
    }
    .sidebar{
        /*$width: 30px;*/
        width: $width;
    }
    /*$width: 20px;*/
}

.content{
    width: $width;
}

/*$width: 20px;*/

进行编译之后输出（无视注释掉的东西）：

.wrap {
  /*$width: 20px;*/
  /*$width: 20px;*/
}
.wrap .main {
  width: 10px;
}
.wrap .sidebar {
  /*$width: 30px;*/
  width: 10px;
}

.content {
  width: 10px;
}

/*$width: 20px;*/

现在是理所当然的常用模式，在最上面设置了变量为 10px，下面引用的地方全都变成了 10px。我们现在注释掉第一行的变量，然后解开最后一行的变量声明。

结果编译报错不通过，提示 Undefined variable 说明变量声明必须在调用变量语句的上面，这样才能正确的调用变量。

现在我们恢复到初始状态，开始测试变量是否具有类似块级作用域的特性。把上面所有注释取消掉：

$width: 10px;

.wrap{
    $width: 20px;
    .main{
        width: $width;
    }
    .sidebar{
        $width: 30px;
        width: $width;
    }
    $width: 20px;
}

.content{
    width: $width;
}

编译后得到：

.wrap .main {
  width: 20px;
}
.wrap .sidebar {
  width: 30px;
}

.content {
  width: 20px;
}

这说明，Sass 中的变量没有块级作用域特性，而是随执行随覆盖随调用。调用的前面没有变量声明，就报错，有很多变量声明，就调用在它上面离它最近的变量值。