普通变量与默认变量

普通变量

定义之后可以在全局范围内使用。

$color: #F90;
.box2 {
  border: 1px solid $color;
}

默认变量

sass的默认变量仅需要在值后面加上!default即可。

$baseHeight:        1.6 !default;
body{
    line-height: $baseHeight; 
}

sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，只需要在默认变量之前重新声明下变量，重新赋值即可

$baseHeight:        2;
$baseHeight:        1.6 !default;
body{
    line-height: $baseHeight; 
}

可以看出现在编译后的line-height为2，而不是我们默认的1.6。默认变量的价值在进行组件化开发的时候会非常有用。