Sass入門ガイド

変数

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
変数とは、名前を決めて値を代入しておくと、好きなタイミングで名前からその値を呼び出すことができる機能を指します。ここでは、Sassにおける変数の使い方について紹介します。
講師:
07:22

字幕

変数とは名前を決めて値を代入しておくと好きなタイミングで名前から、その値を呼び出すことができる機能を指します。このレッスンではSass における変数の使い方について紹介します。画面では IDE でSass ファイルと CSS ファイルをそれぞれ開いています。画面の左側にある Sass ファイルの内容はIDE の機能によって自動的に保存コンパイルされリアルタイムに画面右側の新設ファイルに出力されます。予め書かれている CSS を見てみましょう。ここでは 2 つのルールセットでそれぞれ同じ色の値が使われています。この様に CSS では様々な場所で色の値を書くことがあります。繰り返し使う値は変数として宣言しておくと便利です。実際に変数を書いてみましょう。変数を記述するには記号のドル記号この記号に続いて変数名を記述します。尚、画面の右側にエラーメッセージが表示されていますがこれは一時的にSass ファイルの文法がエラーになっているためとお考えください。変数名を入力します。ここでは myColor という名前にしましょう。変数名の後は記号のコロンを入力してその後は通常の CSS と同じ様に値を入力します。 ここでは色んな箇所で指定しているこの色の値を変数に代入してみましょう。色の値を選択し右クリックからコピーしますそし てmyColor の後ろにペーストします。最後はセミコロンで終わります。この様に CSS とよく似た文法を使って変数を宣言することができます。一度宣言した変数はどこからでも使うことができます。実際に使ってみましょう。変数名を選択してコピーします。そして現在、色の値が入っている場所にこの変数名をペーストします。出力結果を見ても問題無く出力されていることがわかります。もう 1 つの箇所にも変数名をペーストしてみましょう。やはり問題ありません。それでは、この変数の設定が正しく行われているかを確認するために変数に在入している値を書き換えてみましょう。こちらの CSS の出力結果にご注目ください。値を書き換えてみましょう。いかがでしょうか。変数に代入した値がそれぞれのルールセットで使われていることが確認できます。この様に変数は1 箇所で宣言することで様々なルールセットで使うことができます。変数を上手く使えば様々な箇所で使っている同じ値を1 箇所に、まとめることができるのです。尚、変数名には英数字の他にアンダースコア、ハイフン等の記号を使うこともできます。 また変数はscoop と呼ばれる参照範囲を持っています。冒頭に宣言した変数を確認してみましょう。変数は、この様にルールセットの外側でも内側でも宣言することができます。冒頭に記述した変数の宣言を右クリックからカットしてこの content IDE セレクタの中に移動してみましょう。右クリックからペーストします。この様に記述することでこのルールセットの中ではmyColor という変数がfb4777 という色の値であるということが有効化されます。しかし myColor という変数はあくまで、この IDE セレクタの中でだけで使える変数となるのです。これが変数の scoop参照範囲です。そのため、この記述ではh1 というセレクタの中で使っているmyColor という変数が見つからないためCSS の出力結果にエラーが表示されているのです。例えばこの myColor という記述をコピーしてh1 要素のセレクタの中でもペーストして宣言するとエラーが無くなり正常に出力される様になります。この時この content IDE セレクタの中にある myColor とh1 セレクタの中にある myColor は全く別物の myColor ということになります。 試しに上の myColor の値を変更してみましょう。後半の 777 の部分を000 に変えてみます。出力結果を見るとやはり上だけの値が変更されています。この様に変数は宣言する場所でscoop、参照できる範囲が変わってきますので注意しましょう。通常は冒頭の様にルールセットの外側で変数を宣言しそれをそれぞれのルールセットから利用する形この形にすることで混乱なく変数を利用することができるでしょう。尚ルールセットの外側で宣言した変数はルールセットの内側で再度宣言するとその値で上書きされてしまいます。例えば冒頭の変数の宣言では値が fb4000 になっていますがこの h1 セレクタの内側で同じ myColor という変数にred というキーワードを代入していますのでCSS の出力結果ではh1 要素の中で使っているmyColor の値の中身はred に置き換わっています。変数を使う時は宣言する場所に加えて値の上書きにも注意しましょう。

Sass入門ガイド

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

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

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

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

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