Sassのネストで親セレクタを継承して、BEMのmodifier（モディファイア）を効率よく書く方法

Sassを使ってBEM記法でスタイルを書く時場合、&を使って親のセレクタを継承することができます。
これにより、Blockを省略しつつ、Blockごとにクラスを管理できるので、BEM記法を効率よく書くことができます。

.block{
  &__element{
    &--modifier{ スタイル } 
  }
  &--modifier{ スタイル } 
}

しかし、Modifierを使ってBlock全体ごとスタイルを変更したり、バリエーションを作成する場合、CSSでは以下のように.block--modifierの中の.block__elementに対してスタイルを適用させる必要があります。

.block--modifier .block__element{ スタイル }

ですが、SCSSでは以下のように、.block--modifierの中の.block__elementの.blockを省略して書くことができません。
せっかくSassで書いているのに、Blockが重複していまい、違和感を感じます。（自分だけ？？）

.block{
  &__element{ スタイル }
  &--modifier{
    .block__element{ スタイル }
  } 
}

そこで調べてみたところ、Sassの#{$}を使うことで、この問題を解決できるようでした。
#{$}はSassで使用される変数補間の構文です。Sassでは、変数を文字列の一部として展開するために #{$} を使用します。

今回はSassの#{$}を使って、親要素のセレクタを継承して、Modifierの中のElementを効率よく書く方法について解説します。

また、この方法を使用することで、:hoverなどの疑似クラスのように、Blockにマウスオーバーしたした際に、Blockの中のElementにスタイルを適用する場合などにも応用して利用することができます。

ぜひ#{$}の使い方を覚えて、効率の良いコーディングを行いましょう。

INDEX

modifier（モディファイア）

Sassの#{$}を使ってModifierの中のElementを効率よく書くには以下のように作成します。

.block{
  &--modifier{
    .block__element{ スタイル }
  } 
}

.block{
  $block: &;

  &--modifier{
　   #{$block}__element{ スタイル }
  }
}

{$block}__elementの{$block}には、変数$block: &;で指定した親セレクタ.blockが代入されています。

実は、Sassでは変数にセレクタを代入してもその値はセレクタとして扱われません。
ただし、#{$} を使用することで、変数をセレクタとして展開することができます。
これにより、セレクタを動的に組み立てたり、親セレクタを再利用したりすることができます。

それではコンパイルして確認してみましょう。以下のようにコンパイルされていたら成功です。

.block--modifier .block__element{ スタイル }

Blockにマウスオーバーしたした際に、Blockの中のElementにスタイルを適用する場合も以下のように記載します。

.block:hover .block__element { スタイル }

.block {
  $block: &;

  &:hover {
    #{$block}__element { スタイル }
  }
}

以上で、SassでBEMのmodifier（モディファイア）を効率的に書く方法を解説しました。
同じような悩みを抱えている人にとって、役立つ情報となれば嬉しいです。