【メモ】BEMとSCSS

mainという親を持つ同じようなブロックがある
modifierによって子要素のmain_contentにそれぞれ異なるスタイルを当てたい。

.main
  .main__title
    タイトル
  .main__content
    中身
.main--loc__primary
  .main__title
    タイトル
  .main__content
    中身

.main--loc__secondary
  .main__title
    タイトル
  .main__content
    中身

普通？に書くと

.main, .main--loc__primary, .main--loc__secondary{
  width: 300px;
  height: 300px;
  background-color: #CCC;
  margin-bottom: 10px;
  &__title{
    font-size: 20px;
  }
  &__content{
    font-size: 10px;
  }
  &--loc__primary{
    .main__content{
      background-color: #F00;
    }
  }
  &--loc__secondary{
    .main__content{
      background-color: #0F0;
    }
  }
}

こんな感じになるかなぁと。
そこでat-rootやらインターポレーションを使って玄人っぽく書くと

.main{
  @at-root{
    &, &--loc__primary, &--loc__secondary{
      width: 300px;
      height: 300px;
      background-color: #CCC;
      margin-bottom: 10px;
    }
    #{&}__title{
      font-size: 20px;
    }
    #{&}__content{
      font-size: 10px;
    }
    &--loc__primary #{&}__content{
      background-color: #F00;
    }
    &--loc__secondary #{&}__content{
      background-color: #0F0;
    }
  }
}

わかりにくっ！ｗ

そんなことより

.main{
  background:{
    image: image_url();
    repeat: no-repeat;
    position: 50% 50%;
    size: cover;
  }
}

って書けるのを知って衝撃でしたｗｗｗ