32.Sassの便利な書き方を知る② ~配列、map型変数、mixin~
本日はSassの目玉、mixinを学習します。
昨日触れなかったmap型変数についてもやっていきます。
配列とは
こちらはjQuery等でも扱っているので、さらっと確認する程度で済ませます。
配列は変数の中に複数の値を持っていて、
インデックスと呼ばれる値の並び順を使って、値を取得したり代入したりします。
(Sassの配列は正確にはListというものらしいです。)
配列を定義するには
$配列名 : 値0 , 値1 , 値2 ・・・値N ;
このように書きます。
値にアクセスするには予め用意されているnth()メソッドを使います。
nth(配列名, 配列番号)
このように書かくと、返り値として配列内の指定した番号の値が取得できます。
具体的な例を出すと、
$font-size-sets : 12px , 18px , 24px ;
これで、font-size-setsという名前で、3つの値を持つ配列ができます。
.test{
font-size: nth($font-size-sets , 0);
}
これで、.testクラスのfont-sizeプロパティに、$font-size-sets配列の0番目の値が設定されます。ここでは0番目は12pxですね。
(インデックスは通常0から始まるルールがあります。)
map型変数とは
map型変数は
キーとバリューという2つの組み合わせで変数を管理できる配列のようなものです。
配列では値の並び順の番号を指定して、各種操作をしていました。
「値の並び順」の代わりに、「キーという意味を持たせた文字列」を使って複数の値を管理しようというのがmap型変数です。
先ずは書き方から、
$変数名 : (キー1 : バリュー1 , キー2 : バリュー2 , キー3 : バリュー3 ) ;
のように書きます。
そして値にアクセスするにはmap-get()メソッドを使います。
map-getメソッドには2つの引数があり、
map-get($マップ型変数名 , キー)
と書きます。
それぞれ、
どのマップ型変数を使うのか
と
取得したいバリューに対応するキー
を指定します。
すると返り値としてバリューが得られます。
???
配列のほうが簡単じゃない?なんでこんな面倒なことと思ったそこのあなた。
私も同じでした、この問題は後で解決しますので進めていきましょう。
では具体的に見ていきましょう。
$font-size-sets : ("min" : 12px , "mid" : 18px , "big" : 24px) ;
ここでは、3つのキーとバリューのペアが3つ入っているmap型のfont-size-sets変数が定義されました。
因みに、map型の「マップ」とは、キーに値をマッピングする(対応付ける)という所からきているそうです。
そして、18pxというバリューにアクセスしたい場合は、キー"mid"を使います。
.test{
font-size: map-get($font-size-sets , mid);
}
これで、.testクラスのfont-sizeプロパティに、map型変数$font-size-setsのキー"mid"に対応するバリューが設定されます。ここでは18pxですね。
map型変数は何がいいの?
ズバリ、キーが任意の文字列で設定できるところです。
値に意味を与えることができるのです。
先ほどの例でもfont-sizeに対して、「mini、mid、big」と意味を持たせて管理していました。
ですので、中くらいのフォントサイズにしたいからmidを使おうと簡単にアクセスする先を決定することができます。
これが配列だったら「0,1,2」という順序での管理なので、
中くらいのフォントサイズにしたいけど、18pxは何番目だったかな?
となってしまいます。
今日のまとめ
- Sassの配列はアクセスにメソッドを使用する。順序で管理する。
- map型変数はキーとバリューというペアで管理する。
- map型変数はキーに意味を持たせることで、意図が伝わりやすい。
今日は配列とmap型変数について整理しました。
mixinについても書こうと思ったのですが、長くなりすぎたので明日に持ち越しです。
では、また。