Sass入門ガイド

親セレクタの参照

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
子セレクタから親セレクタを参照するには、&を使います。ここでは、親セレクタの参照について紹介します。
講師:
02:53

字幕

子セレクタから親セレクタを参照するには& 記号を使います。このレッスンでは親セレクタの参照について紹介します。画面では IDE でSass ファイルと CSS ファイルを開いているところです。IDE の機能を使ってSass ファイルの内容が自動的に保存、コンパイルされCSS ファイルに反映される様に設定しています。ここでは予めcontent という IDE セレクタの子孫にa 要素がありその a 要素に対して「背景色を設定する」というスタイルが定義されています。この a 要素に対する背景色の指定に加えてロールオーバーした時の背景色を書き加えてみましょう。通常の CSS の書き方ではこの様に同じセレクタを繰り返し書きa 要素に対してhover 疑似クラスを使ってbackground color を指定します。しかし、この様な書き方でははやり冗長になってしまいます。そこで使うのが親セレクタの参照というSass の機能です。親セレクタの参照を使うと現在、自分がいる階層よりも1 つ上の階層のセレクタを参照することができます。実際に Sass を変えてみましょう。先ほど書いた記述を一旦削除します。 親セレクタの参照を使うにはあるルールセットの中で& 記号を入力します。この & 記号 1 つで自分が今いる階層よりも1 つ上の親のセレクタを参照したという意味になります。そのため、ここでは & に続き擬似クラスで hover を指定し背景色を入力するとこの hover がいる階層よりも1 つ上の階層つまり content IDE の子孫にa 要素がいるというセレクタを参照して擬似クラスを設定することができました。CSS の記法よりも記述量も減って親子関係も階層構造で分かり易くなったと言えます。尚ここでは分かり易い例として擬似クラスを使用しましたがクラスセレクタや IDE セレクタその他のセレクタでも利用することができます。このレッスンでは親セレクタの参照について学びました。

Sass入門ガイド

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

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

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

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

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