Sass(SCSS)でCSSを入れ子（ネスト）にする方法/SCSSの基本記述、&の使い方

SASSには二種類の記述方法があり、それぞれSASSとSCSSと呼ばれます。どっちもそれぞれのメリットがあるようなんですが、とりあえずScssについて書いてみたいと思います。

SCSSで要素を入れ子にする方法

普通のCSSと同じ感覚で書けますが、セレクタと同列に子セレクタを配置し、その中にさらにSCSSを書いていくことができます。

/*SCSS*/
.parent{
  font-size:20px;
  a{
  color:blue;
  }
}

「入れ子」になったa要素には、親のparentクラスがそのまま引き継がれます。普通のCSSで書くとこうなります。

/*CSS*/
.parent{
  font-size:20px;
}
.parent a{
  color:blue;
}

同じ内容でも、「parent」を1度しか書かないで済みます。もし「parent」というクラス名が変更になった場合、Sassでは親のクラス名ひとつを変更すれば事足りますが、CSSでは2回コードを修正する必要があります。
細かいことの積み重ねですが、コードが長くなればなるほど効果が積み上がり、最終的に大きな差となって現れる、というのがSass記法の主たるメリットです。

入れ子でイベントを追加する方法

hoverなどのイベントも、&:を頭につけることで入れ子にすることが可能です。

/*SCSS*/
.parent{
  font-size:20px;
   &:hover{
  color:green;
  }
}

CSSの便利な使い方・プロパティ逆引きリファレンス

HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。 ちょっととっても数少ないですが、段々増える予定です。

sunagitsune.com

2019.01.27