Sass入門ガイド

インターポレーション

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
セレクタやプロパティに対して、変数の値を適用したいときは、インターポレーション(補間)を使います。ここでは、インターポレーションの使い方について紹介します。
講師:
03:42

字幕

セレクタやプロパティに対して変数の値を適用したい時はインターポレショーン、保管を使います。このレッスンはインターポレショーンの使い方について紹介します。画面では IDE を使ってSass ファイルと CSS を並べて開いているところです。画面左の Sass ファイルで編集した内容はIDE の機能を使って自動的に保存コンパイルが行われ画面右側の CSS ファイルに出力される様に設定しています。Sass では CSS の値に対して変数を使うことで1 箇所で宣言した変数を複数の場所で使い回すということができる様になります。しかし通常セラクタやプロパティに対して変数を適用することができません。そんな時使えるのがインターポレショーンです。インターポレショーンを使うと本来変数の値が使えないセレクタやプロパティに対しても変数の値が使える様になります。実際にやってみましょう。冒頭でセレクタの名前を変数に入れます。ここでは myId という名前でIDE コンテントを指定します。そしてこの myId という変数を一旦コピーしてこのセレクタ名の部分で使ってみましょう。ペーストします。CSS では現在エラー文が表示されています。 これは先ほど申し上げた通りセレクタには変数の値がそのまま使えないためです。それではインターポレショーンを使ってみましょう。インターポレショーンを使うには使いたい変数の値の前に記号のシャープそして変数の前後に波括弧を入力します。この様な書式です。こうすることで本来変数の値が使えないセレクタやプロパティの部分で変数を用いることができます。CSS の出力結果も正常になっています。それでは同じ様にプロパティ名についてもインターポレショーンを使って変数化してみましょう。これは myProperty という変数を宣言しその中に width という文字列を入力します。そして myProperty を選択してコピープロパティ名の部分にペーストします。前後に波括弧前にシャープを付けて入力するとこの様にプロパティ名の部分でも変数を使うことができました。他にもインターポレショーンを使うと元々変数が使えない場所でも変数が使える様になる場所は沢山あります。変数の値がそのまま使えない箇所ではインターポレショーンを使ってみましょう。このレッスンではセレクタやプロパティに対して変数の値を適用したい時に使うインターポレショーンの使い方について学びました。

Sass入門ガイド

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

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

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

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

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