sass 变量的声明嵌套

sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。
 
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight; 
}
编译后的css代码：
body{
    line-height:2;
}

全局变量和局部变量

全局变量是定义在外面的变量

局部变量是定义在括号里面的变量，在局部里面调用同名变量，就是在调用局部变量，布局变量不会污染外面的全局变量

Sass 的嵌套分为三种：

选择器嵌套
属性嵌套

伪类嵌套

假设我们有一段这样的结构：
<header>
<nav>
    <a href=“##”>Home</a>
    <a href=“##”>About</a>
    <a href=“##”>Blog</a>
</nav>
<header>
那么在 Sass 中，就可以使用选择器的嵌套来实现：
nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }  
}
&是取父值
他的父亲是 nav a
所以header & = header nav a

Sass 中还提供属性嵌套，CSS 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，与这个类似的还有 margin、padding、font 等属性。假设你的样式中用到了：
.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}
在 Sass 中我们可以这样写：
.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

伪类嵌套。&：before 或 &：after

.clearfix{
&:before,
&:after {
    content:"";
    display: table;
  }
&:after {
    clear:both;
    overflow: hidden;
  }
}
编译出来的 CSS：
clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  overflow: hidden;
}

sass 变量的声明 嵌套

sass 变量的声明嵌套