Sassの便利な機能、入れ子について紹介したいと思います。ちなみに入れ子のことを英語でネストと言い、実際にSassでもそう呼ばれることがあります。入れ子は、Sassを使うのであれば絶対使うものです。
入れ子（ネスト）の基本
入れ子とは、簡単に言うと今まで一つの{ }で完結していたものを、{ }の中に{ }を書いてCSSで値を指定していくものです。早速コードを見てみましょう。
HTMLコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
#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に変換した後
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
#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を判断することができます。 ちなみにネストには、改行やインデントのルールもありません。
メディアクエリでも便利なネスト
|
1 2 3 4 5 6 7 8 9 |
#box1 { width: 300px; float: left; @media screen and (max-width: 480px) { width: 100%; float: none; } } |
レスポンシブにもよく使われるメディアクエリはCSSだと記述が離れてしまい見つけるのも大変でした。ネストを使えば、とてもわかりやすくメディアクエリをつけることができます。
