BEMのためのSASS記法

CSSの命名規則として有名なBEM (Block + Element + Modifier)。

SASSでBlockに対してhoverやModifierを書いて、その中のElementのスタイリングを書く際に、Block名などを重複して書かずにスマートに書く方法。

今日突然見つけられたのでメモ。

// BLOCK
.button {
  background-color: #fff;

  // ELEMENT
　　&__label {
    color: #000;
  }

  // BLOCK + hover state
  &:hover & {
    &__label {
      opacity: 0.8;
    }
  }

  // BLOCK + MODIFIER
  &#{&}--red {
    background-color: #ff0000;
  }

  // BLOCK + MODIFIER > ELEMENT
  &#{&}--red & {
    &__label {
      color: #fff;
    }
  }
}

ビルド結果

// BLOCK
.button {
  background-color: #fff;
}

// ELEMENT
.button__label {
  color: #000;
}

// BLOCK + hover state
.button:hover .button__label {
  opacity: 0.8; 
}

// BLOCK + MODIFIER
.button.button--red {
  background-color: #ff0000;
}

// BLOCK + MODIFIER > ELEMENT
.button.button--red .button__label {
  color: #fff;
}

次回は、Sketchのレイヤーやシンボルの命名規則にもBEMが使えるよ、という話を書こうかな・・

追記: 書きました！