Sassで:last-childなどの擬似クラスを使用するときの注意点

概要

たとえば、要素を繰り返し表示していて最後の要素のみmarginを抜きたいなど、:last-childを使用することがあるが、ネストして書く場合は必ず&をつけなければならない。

付けなかった場合、その配下の要素にlast-childが付いてしまい上手くスタイリングできない。

正しいコード

 .data {
   &__item {
     margin-bottom: 15px;

     &:last-child {
       margin-bottom: 0;
     }
   }
 }

間違っているコード

 .data {
   &__item {
     margin-bottom: 15px;

     :last-child {
       margin-bottom: 0;
     }
   }
 }