親セレクターを参照する「 & (アンパサンド) 」

メモ:  Category:front-end

Sass では、セレクタの中にセレクタを書いてネストするという便利な機能があるのですが、さらに便利にしてくれるのが1階層上のセレクタ(親セレクタ)に置き換えて CSS を出力してくれる機能が用意されています。

親セレクタで置き換えてくれる「 & (アンパサンド) 」

「 & (アンパサンド) 」で記述すると、その親にあたるセレクタで置き換えてくれる便利な機能が用意されています。

例えば、次のようにネストした状態で「 & (アンパサンド) 」を使ってみます。

a {
  background-color: #90A4AE;
  transition: background-color .5s;
  &:hover {
    background-color: #795548;
  }
}

コンパイルを実行すると、「 & (アンパサンド) 」の部分が親にあたる「 a 」に置き換えられて CSS 出力されます。

a {
  background-color: #90A4AE;
  transition: background-color .5s; }

a:hover {
  background-color: #795548; }

この親セレクタで置き換わる機能は、 BEM (Block-Element-Modifier)などの命名規則に従って CSS を作成する時にも便利で次のように SCSS を作成することもできます。

.c-btn {
  display: inline-block;
  cursor: pointer;
  line-height: 1;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  background-color: #fff; 
  &--ghost {
    background-color: transparent!important;
    color: #fff;
  }
}

上記 SCSS をコンパイルすると、親のセレクタ名と結合してセレクターが出力されることが確認できます。

.c-btn {
  display: inline-block;
  cursor: pointer;
  line-height: 1;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  background-color: #fff; }
.c-btn--ghost {
  background-color: transparent !important;
  color: #fff; }

この「 & (アンパサンド) 」は、親セレクターで置換されるというイメージがわかりやすいかもしれません。

bluenote by BBB