SASS（SCSS）のマップを使ってみよう
こんにちは、王将の冷凍羽付き餃子を焼く時にフタをしなくてもいいと書いてあるのにフタをしてしまうともよーんです。だって、火が通るか不安で…。
今日はSassのマップの便利な使い方のご紹介です。
連想配列のように並べたmapキーと値をeachで当てはめて行きます。同じ形の部品で、カラーバリエーションを増やすのに便利で、システムのUIなど作る際に役立ちます。今回は色違いのボタンを作っていきます。
まず、下準備。
クラス名の一部だけを変えたボタンのhtmlを用意します。
<button class="btn" type="button">ボタン</button>
<button class="btn btn-primary" type="button">ボタン</button>
<button class="btn btn-secondary" type="button">ボタン</button>
<button class="btn btn-tertiary" type="button">ボタン</button>これらに対して、スタイルを当てていきます。
まず、共通のスタイルを書きます。デフォルトをグレーにしておきます。
.btn {
display: inline-block;
margin: 10px;
width: 200px;
height: 50px;
border-radius: 5px;
background-color: #333;
font-size: 1.4rem;
color: #fff;
}こんな感じになります。
ここに、カラーバリエーション用のスタイルをmapを使って書いていきます。
まず、mapのキーと値を次のように並べます。左側の”primary”や”secondary”などがキーで、右側のカラーコードが値です。キーと値でワンセットで、今回は3セット用意しました。
注意したいのは{}ではなく()で囲んでいるところです。また、キーをクオテーションで囲まなくても動きますが、オフィシャルでは囲むことが推奨されています。
参照）Sass: Maps
https://sass-lang.com/documentation/values/maps
$btn-colors: (
"primary": #337AB7,
"secondary": #5CB85C,
"tertiary": #F0AD4E
);この色を@eachを使って、以下のように記述すると、1つ目の変数（$key）にmapのキーが、2つ目の変数（$value）にmapの値が当てはめられて、上に用意したキーと値のセット分だけ（今回は3回）ループが回ります。$keyや$valueなどの変数名は好きに変えて大丈夫ですが、意味のわかりやすいものにしましょう。
@each $key, $value in $btn-colors {
.btn-#{$key} {
background-color: $value;
}
}コンパイル後のcssはこんな感じになります。
.btn-primary {
background-color: #337AB7;
}
.btn-secondary {
background-color: #5CB85C;
}
.btn-tertiary {
background-color: #F0AD4E;
}見た目も変わりました！一つ目がデフォルト色で、右3つがmapを使って割り当てたカラーバリエーションです。
mapの値の箇所にはカラーコード以外の値も入れられて、例えばwebフォントのcontent値を入れてアイコンのバリエーションを作ることもできます。ぜひ使ってみてくださいね！
