• 选择器嵌套

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

//.scss
nav {
  a {
    color: red;

    span{
      color: yellow;
    }

    header & { //& 符号是取父值，这里为 nav a
      color:green;
    }
  }  
}

//编译后.css
nav a {
  color: red;
}
nav a span {
    color: yellow;
}
header nav a {
    color: #e91881;
}

• css属性嵌套xx:

CSS 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right

<nav class="box">
    <a href=“##”><span>Home</span></a>
    <a href=“##”>About</a>
    <a href=“##”>Blog</a>
</nav>

//.scss
.box{
    border: {
        top: 1px solid #ccc;
        bottom: 1px solid #ccc;
    }
}

//.css
.box {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

• 伪类嵌套&:/&::

//.scss
.clearfix{
    &::before,
    &::after{
        content:"";
        display: block;
    }
    &::after{
        clear:both;
        overflow: hidden;
    }
}

//.css
.clearfix::before, .clearfix::after {
  content: "";
  display: block;
}
.clearfix::after {
  clear: both;
  overflow: hidden; 
}