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層を超えないでください.