Sass入門ガイド

スコープ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
変数などと同様に、ミックスインもスコープを持ちます。ここでは、例を挙げながらスコープを制限したミックスインの動作について紹介します。
講師:
03:11

字幕

変数等と同様にミックスインもスコープ参照範囲を持ちますこのレッスンでは例を挙げながらスコープを制限したミックスインの動作について紹介します。画面では IDE でSass ファイルと CSSフ ァイルを並べて開いています。左側には Sass ファイルがありここで編集した内容はIDE の設定によって自動的に保存、コンパイルが行われ右側の CSS ファイルに反映される様になっています。Sass ファイルにはボタンベースというミックスインが定義されておりその下のボタンクラスではこのボタンベースミックスインを@include で読み込んで使っています。スコープ、参照範囲とはその機能が利用できる範囲のことを差します。ここではミックスインが特にネストされずにトップレベルに対して定義されていますのでどの場所からでも、このミックスインを利用することができます。別のパターンとして例えば何かしらのセレクタにネストされた場合を考えてみましょう。ここでは content という IDセレクタの中でこのミックスインが定義された場合挙動はどうなるかをチェックしてみましょう。ボタンベースのミックスインを右クリックでカットしcontent ID のセレクタの中にペーストします。 そして、これを利用するボタンクラスはこの content ID よりも下に持ってきましょう。CSS の出力結果を確認するとundefined mixin btnBase と書かれています。これはエラー文です。undefined mixin btnBase とはボタンベースという名前のミックスインがundefined つまり未定義であることを示しています。Sass ファイルではcontent ID のセレクタの中でネストしてミックスインを定義しましたのでこのネストの外側からはミックスインを利用できないということになります。これがミックスインのスコープ参照範囲です。このcontent ID の内側で宣言されたミックスインを利用するにはあくまでこの content ID の内側から利用しなければなりません。例えば、このボタンクラスをカットしてcontent ID のセレクタの中にペーストすると先ほどまではエラーが出ていた CSS が正常に出力できました。この様にミックスインを定義する時はそのスコープに注意をしましょう。このレッスンでは変数などと同様にスコープをもつミックスインの動作について学びました。

Sass入門ガイド

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

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

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

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

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