Sass入門ガイド

@extend スタイルの継承

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
あるセレクタにスタイルを定義したあと、他のセレクタに同じスタイルを適用したい場合は、継承という機能を使うと便利です。ここでは、@extendディレクティブを使ったスタイルの継承について紹介します。
講師:
07:00

字幕

あるセレクタにスタイルを定義した後他のセレクタに同じスタイルを適用したい場合は継承という機能を使うと便利です。このレッスンは @extend ディレクティブを使ったスタイルの継承について紹介します。画面では IDE でSass ファイルと CSS ファイルを並べて表示しています。IDE の機能を使って左側にある Sass ファイルを直接編集した場合はその内容が自動的に保存、コンパイルされリアルタイムに画面右側のCSS ファイルに反映される様になっています。Sass ファイルを見ると3 つのクラスセレクタが宣言されています。それぞれのセレクタについて見ていきましょう。一番上にはボタンビッグクラスセレクタがあります。この中ではbackground から背景色color、文字色width、幅hight、高さの4 つのプロパティが宣言されています。その下のボタンミディアムクラスを見ると同じ様に 4 つのプロパティが宣言されておりそのうちバックグランドカラーとカラープロパティについては全く同じ色の値が設定されています。幅と高さについては違う値が入力されています。一番下のボタンスモールクラスについても同様に背景色と文字色については同じ値が幅と高さについては違う値が指定されています。 この様に CSS では複数の場所で全く同じ様なスタイルの塊を宣言するということがしばしばあります。この様な時は @extend ディレクディブを使ってスタイルを継承すると便利です。実際に書いてみましょう。先ずは継承するための継承元のクラスセレクタを作成します。頭の部分にボタンベースというクラスセレクタを新しく作成します。そして、この 3 つのセレクタで共通しているスタイルつまり背景色と文字色この部分の指定をボタンベースセレクタに移植してみましょう。選択してコピーペーストします。これで継承元のクラスが作成できました。CSS を見ると新しく作られたボタンベースクラスがそのまま出力されていることが分かります。それでは、この継承元のセレクタを@extend ディレクディブを使って継承してみます。ボタンビッグクラスの中の重複している背景色と文字色のスタイルを削除しここで継承を行います。継承を行うには記号のアットマークの後にextend と入力し半角スペースを開けて継承元のセレクタを指定します。ここでは上にあるボタンベースセレクタを継承したいのでボタンベースセレクタを指定します。最後はセミコロンで閉じます。 書き出された CSS を確認してみましょう。ボタンビッグクラスの中からは背景色と文字色の指定が無くなりその上に定義されている継承元のボタンベースクラスその横にボタンビッグクラスが並記される形になりました。これが @extend ディレクディブを使ったスタイルの継承の効果です。同じ様に下の 2 つのクラスセレクタでも継承をしてみましょう。重複しているスタイルの指定を削除してextend ディレクディブを使ってボタンベースクラスを継承します。コピーして同じ様に一番下にもペーストしましょう。再度出力された CSS を確認するとそれぞれ 3 つのクラスセレクタから背景色と文字色の指定が消えて一番上の継承元のボタンベースクラスの中にまとまってスタイルが定義されています。この様に CSS の中で何度も使うスタイルについてはあるセレクタにまとめて宣言してそれを継承することで複数の場所で使い回すことができます。また @extend ディレクディブは複数使うこともできます。例えば同じ様に継承元のクラスを作りこれはボタンベース 2 というクラスを作ります。適当なスタイルを宣言した後にこのボタンベース 2 についても同じく継承してみます。 この様に記述すると書き出された CSS では2 つ目の継承元のクラスセレクタが作られそれに対してボタンビッグクラスが並記される形で出力されています。また何かのセレクタを継承したセレクタを更にもう一度継承させることができます。この下にボタンビッグ 2 という新しいクラスセレクタを作成しこの上にあるボタンビッグクラスを継承してみましょう。書き出された CSS を確認すると新しく単体ではボタンビッグ 2 というクラスは作られず既に継承元に宣言しているところに並記される形でボタンビッグ 2 というクラスが色んな場所に出現していることが分かります。この様にスタイルの継承を使うことで書き出された CSS において重複しているスタイルをまとめることができます。尚 @extend を使って継承する元のセレクタについてはクラスセレクタ以外に ID セレクタやタイプセレクタ、連結セレクタ等各種セレクタを使うことができます。しかしセレクタとセレクタの組み合わせ例えば子孫セレクタや子セレクタ隣接セレクタ等何かしらのセレクタと何かしらのセレクタを組み合わせて使う様なセレクタについては使うことができませんので注意しましょう。 このレッスンではあるセレクタにスタイルを定義した後他のセレクタに同じセレクタを適用したい時に用いるスタイルの継承の概要と@extend ディレクディブについて学びました。

Sass入門ガイド

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

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

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

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

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