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