Compassに依存しない! Sass (SCSS) をちゃんと学ぶ その3

脱Compass Sassを学ぶ - その3

引き続き、Compassに依存しないようにSassの機能をしっかり押さえていきます。
今回は、Sassでのネストルールについて触れていきますが、Sassの書式ではなく、よりCSSの書き方に近いSCSSの書式で解説をしていきます。

SCSSのネストルール

Sassではセレクタをネスト(入れ子)して記述することができます。HTMLのマークアップに沿った形でCSSを把握しやすくなる上に、何度も同じクラス名などを入力するといったCSSの手間の掛かる問題を解決できます。

CSSでは次のように書くところを

SCSSのネストを使って記述すると、次のようになります。

プロパティのネスト

これはセレクタだけではなく、プロパティでもネストで記述できます。

border の後にコロンが入っているところがポイントです。CSSへコンパイルした結果は以下。

ネスト内での@mediaと@import

メディアクエリーをネストする事もできます。

次のようにちゃんと分けてくれます。

また、ネスト内で @import によるファイル読み込みを行う事ができます。

上記の様な内容の _example.scss をネスト内で呼び出します。

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

親セレクタの参照

&(アンパサンド)を使用すると、親セレクタを参照できます。よく使うのがaタグの擬似クラスの指定です。

インターポレーションに使う事もできます。

@at-root

@at-root の役割は、セレクタのネストを解除するというものです。

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

ネストがはずれ、同じ階層にセレクタが出力されました。ならば最初からそう書けばいいのでは? と思いますが、この機能はBEMという命名規則で付けられたクラス名を扱うときに便利なもののようで、ここではあまり触れる事はしません。

BEMと@at-rootについて知りたい場合は、下記のサイトなどを参照してみると良いでしょう。

Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説 | HTML5Experts.jp

BEMという命名規則とSass 3.3の新しい記法 – アインシュタインの電話番号


このように、Sassではネストをつかうことでブロック単位にスタイルをまとめる事ができ、CSSの欠点だった可読性の悪さをカバーできます。その一方で、慣れない内は過度にネストをしすぎてしまう事もよくあります。Sass(SCSS)上では解りやすくても、コンパイル後のCSSのセレクタ指定が異常に長くなってファイルサイズが増大してしまうという、あるあるなミスです。

こんな風に深くネストすると…

こうなります。
ネストが深くなりすぎないことを意識しながら上手に使いましょう。

次回はミックスインとプレースホルダーについて学んでいきます。