Sassの便利機能：入れ子（ネスト）について

Sassの便利な機能、入れ子について紹介したいと思います。ちなみに入れ子のことを英語でネストと言い、実際にSassでもそう呼ばれることがあります。入れ子は、Sassを使うのであれば絶対使うものです。

入れ子（ネスト）の基本

入れ子とは、簡単に言うと今まで一つの{  }で完結していたものを、{  }の中に{  }を書いてCSSで値を指定していくものです。早速コードを見てみましょう。

HTMLコード

<div id="main-contents">
    <section>
        <h1>タイトル</h1>
        <p>段落1:テキストテキストテキスト</p>
        <p>段落2:テキストテキストテキスト</p>
    </section>
    <section class="main-contents-item">
        <h1>タイトル</h1>
        <ul>
            <li>リスト1</li>
            <li>リスト2</li>
        </ul>
    </section>
</div>

CSS

#main-contents {
    width: 960px;
    margin: 0 auto;
}

#main-contents section h1 {
    font-size: 21px;
}

#main-contents section p {
    font-size: 14px;
    color: #000;
}

#main-contents .main-contents-item h1 {
    font-size: 18px;
}

#main-contents .main-contents-item ul li {
    display: inline-block;

}

SCSSに変換した後

#main-contents {
　　　　width: 960px;
 　　margin: 0 auto;

　　　　section {
        h1 {
            font-size: 21px;
        }
        p {
            font-size: 14px;
            color: #000;
        }
    }

   .main-contents-item {
        h1 {
            font-size: 18px;
        }
        ul {
           display: inline-block; 
        }
    }
}

毎回#main-contents …と書かなくてよくなったので、記述量が減り、見た目もわかりやすくなりました。何度も親要素や要素までのルートを書かなくていいので、とても楽です。また、HTMLの構造と同じような見た目になるので、視覚的にCSSを判断することができます。 ちなみにネストには、改行やインデントのルールもありません。

メディアクエリでも便利なネスト

#box1 {
    width: 300px;
    float: left;

    @media screen and (max-width: 480px) {
        width: 100%;
        float: none;
    }
}

レスポンシブにもよく使われるメディアクエリはCSSだと記述が離れてしまい見つけるのも大変でした。ネストを使えば、とてもわかりやすくメディアクエリをつけることができます。