一部sassが当たらなかった時

####解決したかった事

マイページ実装中に一部hamlにsassが当たらない

show.html.haml

.MypageContents
  .MypageContents__side
    .MypageContents__side--nav
      %ul.MypageContents__side--nav--list
        %li.MypageContents__side--nav--list--item
          = link_to "商品一覧", root_path
        %h3.Mypage-nav-head 設定
      %ul.MypageContents__side--nav--list
        %li.MypageContents__side--nav--list--item
          = link_to "ログアウト", root_path
        %li.MypageContents__side--nav--list--item
          = link_to "支払い方法", root_path
  .MypageContents__user
    = current_user.nickname 
    %pさんのマイページ

こちらの
%li.MypageContents__side--nav--list--item
にsassが当たらなかった

該当sass

 &__side {
   float: left;
   width: 280px;
   margin: 0 40px 0 0;
   &__side--nav {
     &__side--nav--list {
       &__side--nav--list--item {
         display: block;
         min-height: 48px;
         padding: 16px;
         background-color: #fff;
         font-size: 14px;
         color: #333;
         .Mypage-nav-head {
           font-size: 16px;
         }
       }
     }
   }
 }

####解決

修正後sass

  &__side {
    float: left;
    width: 280px;
    margin: 0 40px 0 0;
    &--nav {
      &--list {
        &--item {
          border: 1px solid #eee;
          display: block;
          min-height: 48px;
          padding: 16px;
          background-color: #fff;
          font-size: 14px;
          color: #333;
        }
        .Mypage-nav-head {
          font-size: 16px;
        }
      }
    }
  }

####原因

どうやら&の使い方に誤りがあった模様。
sassでの&は親要素のクラス名まで省略してくれるものらしい。
また、.Mypage-nav-headがhamlの入れ子構造とマッチしていなかったのも原因であった。
かなりシンプルに記述する事ができた。