Sass-嵌套

选择器嵌套

选择器的嵌套需要防止滥用，根据以下html结构来解释以下何为选择器嵌套。

结构：

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

根据以上html结构编写嵌套的scss

nav{
    a{
      color:red;
      
      header & {    //& 符号是取父值(前后需要加空格)。这里的父值是nav a ,那么加上header就是header nav a
        color:red;
      }
    }
  }

属性嵌套

css中很多属性前缀相同，譬如margin-top，margin-left；padding-right，padding-bottom...

.box{
    border : {
        left : 1px solid red;
        top : 2px solid blue;
    }
}

伪类嵌套

伪类嵌套需要借助`&`符号一起配合使用。

.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;
}