3.ネストの基本 ー フロントエンドエンジニアのための「Sass」講座
Sassの大きな特徴として、入れ子構造があります。
ここでは、入れ子構造、ネストの書き方の基本を解説します。
Sassには、Sass記法とSCSS記法の2種類がありますが、この講座では特に明記しない限り、SCSS記法で解説をします。
まず、例として、このようなHTMLにスタイルを適用する場合を考えてみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Udemy Sass Sample</title> </head> <body> <main> <section> <h1>見出し</h1> <p>段落</p> <ul> <li>リスト</li> <li>リスト</li> </ul> </section> <section> <h1>見出し</h1> <p>段落</p> <p class="note">注意書き</p> </section> </main> </body> </html> |
CSSで記述する場合、どのようになるでしょうか？
はじめに、mainタグのスタイルを書きます。
次に子孫セレクタを使って、section、h1、pタグ……と、このように記述していくと思います。
最終的には次のようなCSSになるでしょうか。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
main { width: 1000px; margin: 0 auto; } main section { padding: 10px; } main section h1 { font-size: 1.4rem; } main section p { margin-bottom: 20px; } main section p.note { color: #FF0000; } main section ul { margin-bottom: 20px; } main section ul li { margin-left: 20px; } |
このCSSを見て分かる通り、「main」「main section」と、同じセレクタを何度も繰り返し記述していることがわかります。
これをSassで書くと、次のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
main { width: 1000px; margin: 0 auto; section { padding: 10px; h1 { font-size: 1.4rem; } p { margin-bottom: 20px; &.note { color: #FF0000; } } ul { margin-bottom: 20px; li { margin-left: 20px; } } } } |
Sassでは、このように入れ子構造を使って書くことができるため、この繰り返しがなくなります。
Sassを使ってネストで書くことによって、記述量が減り、構造が見やすくなるだけでなく、メンテナンス性も向上するのです。
これがSassを使う大きなメリットです。
【動画講座】 フロントエンドエンジニアのための「Sass」講座 ~基礎から実践まで~
HTML5とCSS3の基本的な知識があれば、Sassの知識はゼロからでも大丈夫!Udemyの動画講座なら、約5時間の動画でWeb開発の現場で使える技術を身につけることができます！
このブログから申し込むと定価1,2000円のところ、
90%OFFの1,200円で受講できるクーポンをプレゼント！
Books
平澤 隆,森田 壮 インプレス 2017-09-15
