Sass入門ガイド

プレースホルダーセレクタ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
スタイルの継承を行うとき、プレースホルダーセレクタを使うと継承元のセレクタを省略することができます。ここでは、%を使ったプレースホルダーセレクタの使い方について紹介します。
講師:
02:53

字幕

スタイルの継承を行う時プレースホルダーセレクタを使うと継承元のセレクタを省略することができます。このレッスンではパーセントを使ったプレースホルダーセレクタの使い方について紹介します。画面では IDE でSass ファイルと CSS ファイルを並べて表示しています。画面左側の Sass ファイルで編集した内容はIDE の機能を使って自動的に保存、コンパイルされ画面右側の CSSファイルに反映される様になっています。既に Sass ファイルには様々なスタイルが定義されています。ここで使われているのは@extend ディレクティブを使ったスタイルの継承です。継承元は一番上に書いてあるこのボタンベースクラスというセレクタです。このボタンベースクラスを下の 3 つのセレクタクラスで継承することでスタイルの継承を行っています。この時出力される CSS を見ると継承元のボタンベースクラスもCSS に書き出されていることが分かります。しかし実際に CSS でクラスをあてる時にはこの下の 3 つのボタンに対するクラスセレクタしか使わず継承元のボタンベースについては不要であるということがあります。そんな時はプレースホルダセレクタを使うと継承元のボタンベースクラスについてはCSS を書き出さない様に変更できます。 プレースフォルダセレクタを使うには各種セレクタの前の記号を削除しパーセントに置き換えます。こうして置き換えたプレースホルダセレクタは@extend ディレクティブに読み込む時も頭の記号を削除してパーセント記号に置き換えます。同様にボタンベースクラスを読み込んでいる箇所に記号の置き換えを行っていきます。コピー & ペーストで記号を置き換えます。すると出力する CSS ァイルを確認すると先ほど割ったボタンベースクラス継承元のボタンベースクラスが無くなっていることが確認できます。この様にププレースフォルダセレクタを使うと@extend ディレクティブを使ったスタイルの継承において継承元のセレクタを出力先の CSS から削除することができます。このレッスンではパーセントを使ったプレイスフォルダセレクタの使い方について学びました。

Sass入門ガイド

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

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

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

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

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