Sass入門ガイド

プロパティのネスト

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ネストは、ルールセットだけではなく-(ハイフン)があるプロパティでも可能です。ここでは、プロパティのネストの概要について紹介します。
講師:
02:41

字幕

ネスト、入れ子はルールセットだけではなくハイフンがあるプロパティでも可能です。このレッスンではプロパティのネストの概要について紹介します。画面では IDE で左側に Sass ファイル右側に CSS ファイルを開いています。IDE の機能を使って左側の Sass ファイルの内容が自動的に保存、コンパイルされ画面右側の CSS ファイルに反映される様になっています。それではプロパティのネストを試してみましょう。プロパティのネストとは例えば border-left の様にプロパティ名の中にハイフンがあるプロパティについてネストができるという機能です。例えばこの border-left をネストさせようとするとハイフンのある箇所に: を入力し波括弧で括ります。この様に本来の CSS には無い書き方をすることで先ほどと同様の出力結果を得ることができました。また、このプロパティのネストは同様に複数をネストしていくことができます。例えばこの border というネストに対してbottomというプロパティを入力してネストしていくと更にプロパティをネストすることができます。ここでは border、bottom、widthつまり下のボーダーの幅を指定してみましょう。 これは width、幅を指定して5px と記述します。コンパイル結果を見るとborder、bottom、width と3 階層に分かれてネストしていたプロパティが1 つに結合され出力されています。勿論、同じ階層に複数のプロパティを並べて書くことも可能です。この様にプロパティをどんどん繋げていくことでプロパティのネストを実現することができます。但しプロパティのネストでは一見するとこの部分のルールがborder、bottom、color ではなく唯の文字色の指定に見えてしまうという問題をはらんでいますので使用には十分注意を配りましょう。このレッスンではハイフンがあるプロパティで可能なプロパティのネストの概要について学びました。

Sass入門ガイド

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

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

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

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

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