[SCSS] selectorのinner ruleは1階層までが良い（親要素参照の `＆`）

概要

すごいざっくりですが、下記のようなHTMLがあったとします（タグは全てdivに統一しました）。

<div class="root">
  <div class="icon">icon</div>
  <div class="caption">caption</div>
</div>

ここにCSS（今回はSCSS）でスタイルをつけたいとします。

• 作成したいcomponentは上記の画像のような感じ。
• hover時にrootはyellowに、iconはredに、captionはblueにしたい（実際にはそんなことはないが、、、）。

改善前

まずは、今まで自分がやっていた感じに記載します。

.root {
  background-color: gray;
  height: 100%;
  width: 100%;

  &:hover {
    background-color: yellow;

    .icon {
      color: red;
    }

    .caption {
      color: blue;
    }
  }
}

.icon {
  height: 48px;
  width: 48px;
}

.caption {
  font-size: 18px;
}

実際にはこれでも十分動きますが、上記の何がいけないのかというと、

• 階層が深くなってしまうことで、componentが増えた場合にstyleが当たる優先順位や記載箇所がわかりづらくなってしまう。
• .rootのhoverにまとめてiconとcaptionの挙動も書いているが、まだこのclassは記載箇所より上には出ておらず、コードとしてはこれもわかりづらい要因となってしまう。

改善後

.root {
  background-color: gray;
  height: 100%;
  width: 100%;

  &:hover {
    background-color: yellow;
  }
}

.icon {
  height: 48px;
  width: 48px;

  .root:hover & {
    color: red;
  }
}

.caption {
  font-size: 18px;

  .root:hover & {
    color: blue;
  }
}

実際にpropertiesが当たるのはどのclassなのかということが、これで明確になる。scssにおいて、親要素を参照したい場合は、

.親要素 {}

.子要素 {
  .親要素 & {
    // 親要素と連動して当てたい子要素のproperties
  }
}

と記載すれば、割とスッキリする。