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 中的变量没有块级作用域特性，而是随执行随覆盖随调用。调用的前面没有变量声明，就报错，有很多变量声明，就调用在它上面离它最近的变量值。

 

转载于:https://www.cnblogs.com/8minutes/p/4824070.html