【SCSS】セレクタの&(アンド・アンパサンド)とは何か？意味や使い方、注意点、メリットを実例で解説｜入れ子・階層構造にした場合のSASS→CSSコンパイル結果（初心者向け、わかりやすい）

SASS（.scss）では要素を指定するときに「&（アンパサンド）」の記号を多用します。

「&（アンパサンド）」は使い慣れると非常に便利ですが、何を意味しているかを理解していないと、CSSにコンパイルしたときに思った動きにならないことがあります。

ここでは「&（アンパサンド）」の使い方や注意点について実例で解説しています。

&（アンパサンド）の意味は何か？

SASS（.scss）における&（アンパサンド）とは、親要素（セレクタ）自体を指しています。

&の使い方

＆は{ }の処理の中で更に{ }を記述するときに、セレクタ名の一部として使用します。

例えば以下のようにクラス名「test」の要素に対する処理の中で＆を使ったとします。

.test {
  &--red{
    color: red;
  }
}

これをCSSにコンパイルすると以下のようになります。

.test--red{
  color: red;
}

セレクタの中に複数＆を設置するとどうなるか？

例えば、以下のように{ }の中のセレクタとして1行に複数の＆を記述すると、記述した＆全てに親要素のセレクタが入ります。

例えば以下のようにクラス名「test」の要素に対する処理の中で＆を使ったとします。

.test {
  & &, p > & {
    color: red;
  }
}

これをCSSにコンパイルすると以下のようになります。

.test .test, p > .test {
  color: red;
}

このCSS自体は.testの配下にある.testを持つ要素と、pタグ直下の.testを持つ要素に「color: red;」を適用するという意味なので、記述する意味はありません。

&の注意点

＆は{ }の中で親要素のセレクタ自身を指定するものですが、親要素を指定するときに常に必要になるわけではありません。

例えば、{ }の中で、親要素配下の要素を指定するためにスペースを空けたり、「>」などの記号を使って絞り込みを行う場合には＆は不要です。

配下の要素を指定する場合（CSSの半角スペースを空ける処理）

例えばクラス名「test」の要素の配下にあるdivタグに対して「color: red;」を適用したい場合は以下のように、{ }の中に直接その要素を記述します。

.test{
  div{
    color: red;
  }
}

これをCSSにコンパイルすると以下のようになります。

.test div {
  color: red;
}

「.test div」となり、.test配下のdivタグを指定していることがわかります。

記号を使って絞り込む

例えばクラス名「test」の要素の直下にあるdivタグに対して「color: red;」を適用したい場合は以下のように、{ }の中に「> .test」と記述します。

＆や親要素の指定は不要です。

.test{
  > div{
    color: red;
  }
}

これをCSSにコンパイルすると以下のようになります。

.test > div {
  color: red;
}

「.test > div」となり、.test直下のdivタグを指定していることがわかります。

複数の絞り込み

半角スペースや記号などを使って、複数の要素を絞り込んで指定する場合も＆は不要です。

.test{
  div, > p, + .next-to{
    color: red;
  }
}

これをCSSにコンパイルすると以下のようになります。

.test div, .test > p, .test + .next-to {
  color: red;
}

＆なしで親要素自身を呼び出せていることがわかります。

＆を使うメリット（使いどころ）

絞り込みで＆を使う必要がないとすると、＆はどこで使うのか？使う必要がないのでは？と思われる方もいるかもしれません。

ですが、＆にはその必要性と利便性があります。

＆を使うのは、以下のような場合です。

親要素をクラス名やid名の一部として指定できる

クラス名の場合

例えばページの中にクラス名「test-review-box」という名前がついた要素があるとします。その配下で赤色を指定する「test-review-box–red」や青色を指定する「test-review-box–blue」を作りたいとします。

一つひとつ記述するのはめんどくさいですが、＆を使うと親要素の「test-review-box」を省略して記述することができます。

.test-review-box{
  &--red{
    color: red;
  }
  &--blue{
    color: blue;
  }
}

これをCSSにコンパイルすると以下のようになります。

.test-review-box--red {
  color: red;
}

.test-review-box--blue {
  color: blue;
}

.test-review-box{
  & --red{
    color: red;
  }
}

.test-review-box --red {
  color: red;
}

id名の場合

&は単に親要素として指定しているセレクタをそのまま表示するだけなので、id名でも使用することができます。

#test-review-box{
  &-first{
    color: red;
  }
  &-second{
    color: blue;
  }
}

これをCSSにコンパイルすると以下のようになります。

#test-review-box--red {
  color: red;
}

#test-review-box--blue {
  color: blue;
}

階層構造が見やすくなる

＆を使うことで、どの要素の中に、どんな指定を作っているのかが非常にわかりやすくなります。

例えば以下のSCSSの記述を見れば、「.test-review-box」の中に「.test-review-box–red」と「.test-review-box–blue」があるというのが一目でわかります。

.test-review-box{
  &--red{
    color: red;
  }
  &--blue{
    color: blue;
  }
}

{ }の中に{ }を複数記述する場合（複数の階層構造）

{ }の中に{ }を複数記述する場合（複数の階層構造）、＆を使うと、親となっている全ての要素の名前を継承します。

例えば、以下のように最上位の親要素に「.test」があり、その下に「&__box」、「&–red」と続く記述があるとします。

.test{
  &__box{
    &--red{
      color: red;
    }
  }
}

これをCSSにコンパイルすると以下のようになります。

.test__box--red {
  color: red;
}

「&–red」によっての親要素は「&__box」、「&__box」にとっての親要素は「.test」なので、「&」の中にはそれぞれの親要素が引き継がれていき、最終的に「.test__box–red」となります。

親要素のセレクタが複数ある場合

親要素にセレクタが複数ある場合も同じ処理になります。

.test{
  div > p, &__box{
    &--blue{
      color: blue;
    }
  }
}

これをCSSにコンパイルすると以下のようになります。

.test div > p--blue, .test__box--blue {
  color: blue;
}

（補足） @at-rootは不要

.scss（.sass）の中に@at-rootが使われていることがあります。

@at-rootは入れ子の中にあっても、無視して入れ子の外側として扱うatルールです。

昔（Sass3.2頃）は&で処理を記述することができず、#{&}として表記していました。その際、階層構造でセレクタを指定すると親要素が重複してしまうことがありました。

この対処法として、@at-rootと#{&}を組み合わせて使っていた時代がありました。

（参考）Sass公式 At-Rules