Sassの便利な親セレクタの参照「&：アンパサンド（アンド）」の使い方

2020年1月30日

Sassでは親セレクタを参照できる＆（アンパサンド）が便利って聞いたけど、使い方が知りたいぞ。

オーライ！Sassの＆（アンパサンド）は確かに便利であり、Sassのネスト（入れ子）機能をさらに使いやすくしてくれるので、是非覚えておこう！

今回は、Sassのネスト機能をさらに便利にする「＆（アンパサンド）」の使い方を例を交えながら詳しく解説していこう！

Sassの「＆（アンパサンド）」の基本的な使い方

Sassの＆（アンパサンド）は、基本的に「親セレクタを参照」できる機能。

親セレクタの参照とは、「ネスト（入れ子）機能」を使って書いた場合「1階層上のセレクタ」をそのままコピーするように、コンパイル後のCSSで記述してくれる機能だ。

わかりやすい例で順番に確認していこう！

通常のCSSの場合

たとえば、通常のCSSで以下のように、グローバルナビのCSSを書いていて「トップページだけはデザインの都合上、背景色を変えて表現したい！」なんて事もあるだろう。

通常のCSS

#gnav {
  background:#eee;
}
body.top #gnav {
  background:#000;
  color:#fff;
}
#gnav ul li{
  list-style:none;
}

ネストを使っただけのSassの場合

上記のCSSを、ネスト機能だけをつかったSassの場合は次のように記述するだろう。

ネスト機能だけを使ったSass

#gnav {
  background:#eee;
  ul li{
    list-style:none;
  }
}
body.top #gnav {
  background:#000;
  color:#fff;
}

トップページの背景色の変更は、ネストから外して記述している。

「＆（アンパサンド）」を使ってネストさせたSassの場合

上記の記述を「＆（アンパサンド）」を使えば、ネストの中で記述することができるので、記述が増えても可読性が保たれるのだ！

「＆（アンパサンド）」を使ってネストさせたSass

#gnav {
  background:#eee;
  body.top & {
    background:#000;
    color:#fff;
  }
  ul li{
    list-style:none;
  }
}

上記の例のbody.top &{}の部分に注目してもらうと、&の記述がネストのひとつ上のセレクタ#gnavの役割を果たしているのだ。

「＆（アンパサンド）」は、その他にも「擬似クラス」や「セレクタの前」にも書けるので、次のような書き方もできる。

「＆（アンパサンド）」をつかった擬似クラスの例

「＆（アンパサンド）」は擬似クラスにも使える。例を見れば一目瞭然。

「＆（アンパサンド）」を記事クラスで使ったSass

a {
  color:#f90;
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

コンパイル後のCSS

a {
  color:#f90;
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
}

「＆（アンパサンド）」をセレクタの前でつかった例

「＆（アンパサンド）」はセレクタの前でも使える。こちらも例を見れば一目瞭然。

「＆（アンパサンド）」をセレクタの前で使ったSass

ul.gnav{
  li{
    list-style:none;
    &.current {
    background-color: #fe0;
    }
  }  
}

コンパイル後のCSS

ul.gnav li{
  list-style:none;
}
ul.gnav li.current {
  background-color: #fe0;
}

このように「＆（アンパサンド）」をセレクタの前で使う事で、クラス付きのタグを、ネストのママ表現できる。

セレクタ名の一部としても使える

「＆（アンパサンド）」は「セレクタ名の一部」としても使える。得に「BEMの命名規則（※1）」を使ったルールでCSSを管理している場合は、ブロック名を何度も書く手間を省くことが可能になる。

「＆（アンパサンド）」をセレクタ名の一部として使ったSass

.block{
  width: 100%;
  display: flex;
  &__element {
    width: 33%;
    }
}

コンパイル後のCSS

.block{
  width: 100%;
  display: flex;
}
.block__element {
  width: 33%;
}

※1 BEMの命名規則とは

BEMとは「ブロック（Block）・エレメント（Element）・モディファイア（Modifier）」の頭文字をとった表現で、CSSのクラス名を一定のルールで記述する事で、クラス名を見ただけで、どこに使っているクラスなのかを瞬時に把握できるように考えられた、命名規則だ。

.block-name__element--modifier

単語の区切りは-で、BlockとElement間は__で接続、ElementとModifier間は--で接続するというルール。

セレクタ名の一部として使いながら、子孫セレクタとしても使う場合

上記の例において、.block .block__elementのように、.blockの子要素に.block__elementが入っている状態をSassで表現する場合は& &__elementのように&を２回使っても問題ない。

「＆（アンパサンド）」を2回記述する場合のSass

.block{
  width: 100%;
  display: flex;
  & &__element {
    width: 33%;
    }
}

コンパイル後のCSS

.block{
  width: 100%;
  display: flex;
}
.blick .block__element {
  width: 33%;
}

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント

学習スタイルが自分に合っているか？
低価格でコスパの良い学習料金か？
講師に質問しやすい環境か？
無料体験できるスクールか？

数あるスクールの中から、実際に受講してわかった事や現役プロならでは目線で厳選・比較したこちらの記事「現役プロ比較！短期｢WEBデザインスクール12校｣おすすめランキング！」を参考に自分に合ったスクールを探そう↓

▶ 現役プロ比較！短期｢WEBデザインスクール12校｣おすすめランキング！

現役デザイナーが実際にスクールを２校受講した経験を元に徹底比較調査した、WEBデザインスクールランキング！まず最初に実際…

まとめ

「＆（アンパサンド）」は、Sassのもっとも基本の機能である、ネスト機能をさらに充実した機能にしてくれる、便利なアイテムなので、しっかり使い方をマスターして、使いこなせるようにしておこう！

Sassの基本をもっと学びたい方は、こちらの記事「Sassを基礎から学ぶ」をご参考にしておこう。

やはりWEBの学習は「基礎」が一番重要！「時間をかけてしっかり」と基礎を固める事で、実際の仕事の案件の時に「基礎がしっかりしている」と、そこから応用が効いて、たいていの問題は解決するので、不安にならずに済むのだ。

しかし時間をかけて学ぶのが難しい方や、できるだけ速く習得したい方はプログラミングスクールなどを検討するのもありだろう。私も実際にオンラインプログラミングスクールを利用して、プログラミングを習得したのでその良さを実感している。自分にあったスクールを探したい人は、実際に私が使ったスクールをはじめいくつかおすすめのスクールを比較しているので、こちらの記事を参考になるだろう！

スクールは多少の費用がかかるが、その分早く仕事で稼げて元以上のものを得られるメリットも！一度検討してみるのもありだろう。