Sass入門ガイド

ルールのネスト

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ルールのネスト(入れ子)を使うことで、同じセレクタを何度も書かなくてよくなり、見た目でも構造を把握しやすくなります。ここでは、ルールのネストの概要について紹介します。
講師:
05:01

字幕

ルールのネスト入れ子を使うことで同じセレクタを何度も書かなくてよくなり見た目でも構造を把握し易くなります。このレッスンではルールのネストの概要について紹介します。画面では ID でSass ファイルとCSS ファイルを並べて開いたところです。左側で編集した Sass ファイルの内容が自動的にコンパイルされ右側に表示される様になっています。現在は Sass ファイルの中身は通常の CSS の記法でスタイルを定義しています。そのため CSS ファイルでも全く同じ内容が表示されコンパイルされています。では実際にルールのネストを使ってこのスタイルを書き換えてみましょう。ここではID セレクタでcontent という ID に対してセレクタを作成しています。そのcontent id の子孫にあるh1 や p 要素に対してもスタイルを定義しています。この様に、あるセレクタを親としてその子孫に対してスタイルを定義する場合これらのルールはネスト、入れ子にすることができます。例えばこの 2 つ目のルールセットcontent id の子孫にh1 要素があるこのルールセットをネストにします。先ず、この頭にある content id を削除しh1 要素のルールセットこの部分を選択してから右クリックでカットします。 そして ID セレクタをしているルールセットの中にネスト、入れ子にしてしまいます。右クリックから先ほどカットしたコードをペーストします。この様に content id のセレクタの中にh1 要素をネスト入れ子にすることで出力された CSS ファイルを見ると元どおり content id の子孫に h1 要素があるというセレクタがそのまま出力されています。こちらの p 要素に対するルールセットも移植してみましょう。content の部分を削りp 要素の部分をcontent id セレクタの中にペーストします。出力された CSS を確認しますとはやり先ほどと同様にcontent id のこの要素としてp要素があるという様に正しくセレクタが出力されています。またネストは幾つもネストすることが可能です。例えばこの p 要素の中にm 要素があるこの様な指定をすれば実際に出力される CSS ではcontent id の下のp 要素の下の m 要素という様にどんどん子孫要素を掘り下げていくことができます。この様にルールセットをネストしていくことで記述量が短くなりシンプルに書くことができます。また視覚的にも行動のインデントとセレクタ同士の親子関係が分かり易くなり行動を一目見ただけでその内容がなんとなく把握できるというのもポイントが高いと言えます。 更にポイントとしてこの様にルールをネストした場合は例えば ID セレクタの名前が変わった場合に1 箇所名前を変えてしまえば全てに対応できるということも挙げられます。content からrule という言葉に名前を変えると出力された CSS でも全てのセレクタにたいしてID の名前が変わっています。尚注意したいのはネストの深さです。ネストは幾つでも好きなだけ深さを深くしていくことができますがあまりにもネストが深い場合出力される CSS を見るとこの様に非常に長いセレクタを作りがちになってしまいます。そのためルールをネストする時はどの程度ルールをネストするのか目安となる階層の深さをある程度決めておくと良いでしょう。このレッスンでは同じセレクタを何度も書かなくてもよくなり見た目でも構造を把握し易くなるルールのネストの概要について学びました。

Sass入門ガイド

SassはCSSを効率的に書くための拡張言語です。Sassにはセレクタの入れ子、変数の利用や条件分岐などCSSだけでは実現できないパワフルな機能が数多く用意されています。これらの機能を使うことでCSSを記述するのに割く時間を大幅に減らすことが可能です。このコースではSassの導入方法からひと通りの機能を使いこなせるところまで順を追って解説します。

3時間41分 (43 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年10月16日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。