【解説】Sassのアンパサンド(＆)とネストは書き方や使い方が違う！

現在、ポートフォリオとなるようなサイトを作ろうとフロントエンドの勉強をしております。

先日はjQueryを勉強してJavascriptを簡単に扱えるようになったので、次はCSSをもっと扱いやすくなるようにとSassについて勉強してます。

そんな中で私が疑問を持った＆（アンパサンド）と入れ子（ネスト）の書き方の違いについてお話していきます。

あわせて読みたい

【初心者向け】jQueryの基本的な使い方 Webアプリケーションを作るとき、表示させるページにJavascriptで動きを付けたり処理させたりすることが出てくると思います。そんなときjQueryを使うと簡単に記述することができます。jQueryは具体的にどのようなことができるのか、どんな書き方をするのか解説していきます。

侍テラコヤ(SAMURAI TERAKOYA)

入会金不要でいつでも解約自由なコスパ最強のサブスク型スクール！ 月額2,980円(税抜)でプロの現役エンジニアに質問し放題。 プログラミング以外にも、PhotoshopやWordPressなどの副業や独立後に役立つスキルも学ぶことができます。

公式サイト 口コミ・評判

Sassにおけるネスト（入れ子）の書き方

Sassではネスト（入れ子）を使うことにより、CSSで書くよりもコードを書く量を減らすことができます。

例えばCSSで以下のように記載されているコードも、

p {
  font-size: 15px;
}
p .class1 {
  color: red;
}
p .class2 {
  color: blue;
}

Sassで書くとこのように短く書くことができます。

p {
  font-size: 15px;
  .class1 {
    color: red;
  }
  .class2 {
    color: blue;
  }
}

p要素という親要素に対してフォントサイズを15px、class1という子要素に文字色を赤、class2という子要素に文字色を青という指定をしています。

このときCSSで書くと、親要素であるpを子要素を書く度にに書く必要があります。

しかしSassで書くと、親要素は省略することができ、親要素の中に子要素を書くことで表現してます。

他の言語でも関数などを書く際によくある書き方ですね。この書き方を入れ子、またはネストと呼びます。

アンパサンド（＆）を使った書き方

では、アンパサンド（＆）とはどのように使いのでしょうか？

主にhoverを使いたいときに使います。

.class3 {
  color: red;
}
.class3:hover {
  color: blue;
}

class3というクラスを持った要素にマウスカーソルを合わせると文字の色が赤から青に変わるという処理をするCSSです。

これをSassで表現すると、

.class3 {
  color: red;
  &:hover {
    color: blue;
  }
}

このようになります。

クラス名を何度も書く必要がなくなり手間が省けますね。

このような要素:hoverと書くような場合は、＆を使います。

＆とネストの違い

ここまでだと「なるほど、へー」って特に疑問なく納得しますよね？

しかし、このような書き方をされていたらどうでしょう。

.class4 {
  font-size: 15px;
  &.class5 {
    color:black;
  }
}

「class4が親要素でその中に子要素class5がネストされているから・・・この＆ってなんだろう？」

そう思いませんか？

私はとても疑問でした。

.class4 {
  font-size: 15px;
  .class5 {
    color:black;
  }
}

こう書かれていたら、「class4を親要素に持つ子要素class5に対して色を黒にする」と理解できますが、hoverなどを書く時に使う＆が書かれていると謎ですよね。

まず、答えを言ってしまいますと、「class4とclass5を両方持つ要素に対して適用される」という意味です。

具体的にどのようなものかと言いますと、

<div class="class4 class5"></div>

例えばこのようなものです。

class4とclass5を両方持っているので&.class5が適用されます。

単純な作りのページであればあまりこのような書き方は使われないでしょうが、要素が複雑にネストされているようなページだと使われることもありそうです。

<div class="header">
  <div class="menu">
    <p class="name"></p>
  </div>
  <div class="content">
    <div class="name"></div>
  </div>
</div>

例えばこのようなページだとp要素のnameとdiv要素のnameにそれぞれ別の処理をしたい場合、ネストで上から順々に辿っていかずとも＆を使えば簡単に表現できそうですね。

最後に

私が勉強中に疑問に思った「＆とネストをどのように使い分けて書くのか」についての解説でした。

恐らくCSSをしっかりと理解されている方にとっては何の疑問もなく理解できている部分だと思います。

私はCSSがしっかりと理解できていなかったせいか、考えてもよくわからず、最終的にはCSSの基本的な解説を読んでようやく理解に至りました。

わかっていたつもりでわかっていなかったってことですね＾＾；

今回このように疑問を持つことでCSSの復習にもなったので自分としては少し成長できたかなと思ってます。

ただ勉強をしているだけでなく、1つ1つしっかり理解しながら進めるのが非常に大事だと感じた出来事でした。