Sass 的嵌套分为三种：

• 选择器嵌套
• 属性嵌套
• 伪类嵌套

1、选择器嵌套

<header>
<nav>
    <a href=“##”>Home</a>
    <a href=“##”>About</a>
    <a href=“##”>Blog</a>
</nav>
<header>

想选中 header 中的 a 标签，在写 CSS 会这样写：

nav a {
  color:red;
}

header nav a {
  color:green;
}

sass的选择器嵌套：

nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }  
}

选择器嵌套冗长且容易错，应该尽可能少用

2、属性嵌套

原CSS： .box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

sass：.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

3、伪类嵌套

伪类嵌套和属性嵌套非常类似，只不过他需要借助`&`符号一起配合使用

sass：  .clearfix{
&:before,
&:after {
    content:"";
    display: table;
  }
&:after {
    clear:both;
    overflow: hidden;
  }
}

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