sass笔记之嵌套

选择器嵌套：

nav {
 a {
    color: red;

    header & {
      color:green;
    }
  } 
}

==

nav a{
     color: red;
}
header nav a {
     color: green;
}

属性嵌套：

nav a{
     font{
          size: 12px;
          weight: bold;
     }

}

伪类嵌套：

.clearfix{
     &:after{
          content: '';
          clear: both;
     }
}

避免选择器嵌套：

• 选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。

• 选择器越具体则声明语句越冗长，而且对最近选择器的引用(&)也越频繁。在某些时候，出现混淆选择器路径和探索下一级选择器的错误率很高，这非常不值得。

根据腾讯AlloyTeam的前端规范，选择器的嵌套不要超过5层