【Sass】効率的な記述に欠かせないネスト機能を使ってみよう

Sassの基本の考え、ネストとは？

ネストとは、CSSをHTML構造に合わせて書いていくことができる記述方法で、CSSの管理や階層構造の把握がしやすくなります。

• 同じセレクタに同じCSSを書く記述量に開放されて、冗長なコードにならない。

• 階層構造が把握しやすいため、変更や上書きへの対応がしやすい。

• CSSの命名規則手法、BEMが使いやすい。

ネストはSassの必須機能であり、ネストを活用するだけでCSSを効率的に構築することができます。書き方のルールとして、「CSSをHTMLのマークアップ構造に合わせて入れ子に書いていく」、慣れてしまうと何も戸惑う事も考える事もなく使えるようになりますので、積極的に活用するとよいでしょう。

ネストの基本

制作にてマークアップ中に下記のようなレベルの作業はまずあり得ません。まずは基本の考えとして、下記のHTMLにスタイルを適用する場合の例を紹介させていただきます。

<main>
  <section>
    <h1>見出し</h1>
    <p class="notes">※注意書き</p>
    <ul>
      <li>テキスト</li>
      <li>テキスト</li>
      <li>テキスト</li>
    </ul>
  </section>
  <section>
    <h1>見出し</h1>
    <ul>
      <li>テキスト</li>
    </ul>
  </section>
</main>

従来のCSSの書き方であれば、次のようにそれぞれの要素に指定していくため、子孫セレクタによる階層構造をたどりながら、スタイルを適用していく手法が多いのではないかと思います。

main{
  margin-bottom:2rem;
}
main section{
  margin-bottom:1rem;
}
main section h1{
  font-size:1.25rem;
}
main section p, main section ul{
  margin-bottom:1.25rem;
}
main section p.notes{
  font-weight: bold;
  color: #ff0000;
}

親要素から始まり、sectionタグ内の各孫要素に対してスタイルを適用するにあたり、同じセレクタを記述し最後の各孫要素を変更しています。制作の場であれば、コピペは当たり前に使用するので、よくある書き方で手間など感じないコーディングかもしれません。しかし、Sassによるネスト手法を使えばどうなるか。

main{
  margin-bottom:2rem;
  & section{
    margin-bottom:1rem;
    & h1{
      font-size:1.25rem;
    }
    & p, ul{
      margin-bottom:1.25rem;
    }
    & .notes{
      font-weight: bold;
      color: #ff0000;
    }
  }
}

同じセレクタを記述するループ地獄から解放され、すっきりした感がありますね。ネストはセレクタの後の波括弧の中に次のルールを書くという、入れ子にして記述する事ができ、次のルールを書くときにインデントする事でマークアップ構造と同じ形式になり、構造の把握がしやすいという利点があります。インデントにつきましては、Sass絶対ルールではありませんがVScodeの拡張機能「prettier」などを利用して、メンテナンスの効率化・構造の把握のしやすさにインデントを心掛けておくとよいかと思います。

ネストをさらに効率的にするマークアップ手法

マークアップをさらに効率よくSassのネストを利用できる設計が、BEM = Block Element Modifierの略で、CSSを設計･命名していく手法です。BEMの考案された目的や命名規則の考え方については、別の記事にて執筆させていただきます。

BEMにてマークアップ

冒頭で基本としてご用意したマークアップですが、まず制作中にあのレベルの構造で終わるページはなく、ランディング量があれば、タグに対して指定するコーディングというのはメンテナンス性にかけます。そこで、命名規則によるCSS設計をすることで、効率よくマークアップを進めます。

<main class="about">
  <section class="about__wrap">
    <h1 class="about__heading">会社概要</h1>
    <p class="common__notes">※注意書き</p>
    <ul class="about__list">
      <li>会社概要リストテキスト</li>
      <li>会社概要リストテキスト</li>
      <li>会社概要リストテキスト</li>
    </ul>
  </section>
</main>

いかがでしょうか。会社概要 - 会社概要の見出し - 会社概要の一覧と、親要素から孫要素まで、一連の流れがある命名となっているかと思います。

BEMを取り入れたコーディング

BEMによる規則的CSS設計をとりいれたマークアップを上記で進めてみました。それでは、CSS設計によるコーディングをSassネストにて記述するとどうなるかみてみましょう。

  .about{
    &__wrapp{
        max-width: 700px;
        margin: 0 auto 5rem;
    }
    &__heading{
        font-size: 1.5rem;
        font-weight: 900;
        margin-bottom: 1rem;
    }
    &__list{
        font-size: 1.24rem;
        & li{
            padding-bottom: .5rem;
            margin-bottom: .5rem;
            border-bottom: 1px solid #224949;
        }
    }
}

いかがでしょうか。SassのネストとBEMの設計を取り入れた事で、セレクタコーディングをするよりメンテナンス性がありますね。例えば納品後に、会社概要の見出し下に、会社概要の説明文を入れたいと入れた場合には直感でマークアップを追記でき、Sassのネスト化されたコーディング、内会社概要の見出し下に会社概要の説明文を追加するというルールが規則化できますね。

まとめ

いかがでしたでしょうか。今回はSassの中で一番利用される、効率的な記述に欠かせないネスト機能を開設させていただきました。ネストにより記述量が減り可読性が上がる、さらにBEM設計により効率・メンテナンス性が上がることがご紹介できたかと思います。

以上となります。できる限りわかりやすく伝えようとしても書くのは難しいです。
コードや記事の書き方について気になるところがあれば、アドバイスいただけると嬉しいです。