web制作のしおり

日々の学習をアウトプットします。

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についても書こうと思ったのですが、長くなりすぎたので明日に持ち越しです。

 

では、また。