【Sass】2次元のMap（連想配列）データを扱う例｜eachループ内でmap-get()を利用

CSSのメタ言語のSassでは、Map（連想配列）のデータを扱うことができます。

Mapでプロパティなどのデータを扱うことでコードを管理しやすくなり、繰り返しデザインする箇所で効率的にデータを利用できます。

今回は、そのMapを使用したコーディングの例となり、２次元となるMapのデータを、eachループ内でmap-get関数を使い取得し、SNSの共有ボタンをコーディングします。

2次元のMap（連想配列）データを扱う例｜eachループ内でmap-get()を利用

例では、Twitter・Facebook・Pocketのボタンをコーディングしています。SNSのアイコンには、アイコンフォントが使える『Font Awesome』のCDNを参照して使用。

See the Pen xWWPya by yic666kr (@yic666kr) on CodePen.

なお、上記例ではSNSボタンの共有リンクは貼っていません。共有リンクを作成する場合には、以下のリンク先を参考にしてみてください。

【WordPress】SNSシェアボタンの共有リンクを作成｜Twitter・Facebookなど

ソースコードの説明

以下は、Sassのソースコードのポイントとなる箇所の説明となります。

CSSで使用する値を、２次元連想配列のデータとして指定

$sns_list: (
	twitter: (
		icon: "\f099",
		icon-color: #fff,
		bg-color: #00acee,
		txt-color: #fff
	),
	fb: (
		icon: "\f09a",
		icon-color: #fff,
		bg-color: #3b5998,
		txt-color: #fff
	),
	pocket: (
		icon: "\f265",
		icon-color: #fff,
		bg-color: #f03e51,
		txt-color: #fff
  )
);

上記ソースコードの箇所では、SNSボタンのコーディングで使用するデータを、２次元連想配列のデータとして指定しています。

２次元連想配列の外側のキーは「classの値で使用するSNS名」を指定し、内側のキーと値は「任意の名前」と「CSSプロパティの値」として、以下の4つを順番に指定しています。

• アイコンフォント（Font Awesome）のUnicode
• アイコンフォントのカラー
• ボタンの背景色
• ボタンのテキストカラー

内側のキーに指定する「任意の名前」には、今回の例の場合では、「アイコンフォント」に指定する箇所には、「icon」等とし、どの箇所のCSSプロパティに使用するデータかを、判断しやすいようにしています。

なお、「アイコンフォントのカラー」、「ボタンのテキストカラー」もすべて同じ値となっていますが、異なるボタンを追加する可能性がある場合には、値を分けたほうが良いと思います。

２次元連想配列のデータを、eachループ内でmap-get()を使い取得

@each $site_name, $property in $sns_list{
	.sns-#{$site_name} {
		background-color: map-get($property, bg-color);
		a{
			color: map-get($property, txt-color);
			&:before{
				content: map-get($property, icon);
				color: map-get($property, icon-color);
			}
		}
	}
}

上記ソースコードの箇所では、eachループ内で、それぞれの要素に指定するCSSプロパティの値を、Mapのデータから、map-get関数を使い取得しています。

eachループ

eachループの構文では、inの右側に扱う連想配列または配列を指定し、inの左側にキー、値を格納する変数を指定します。

今回の例では、連想配列$sns_listの指定と、キーを格納する$site_nameと、値を格納する$propertyを指定しています。

map-get関数

map-get関数では、Map（連想配列）のデータから指定したキーの値を取得します。第1引数には連想配列を指定し、第2引数には取得したい値のキーを指定します。

例では、map-get関数の第1引数に内側の連想配列$propertyを指定し、第2引数に取得するCSSプロパティの値によって、それぞれのキーを指定しています。

インターポレーション｜#{}

Sassでは、変数に格納した値はCSSのプロパティの「値」として使用しますが、インターポレーションという#{}の構文で変数を囲むと「文字列」として使用でき、セレクタやプロパティ名などでも利用できます。

例では、.sns-#{$site_name}として、変数の値をセレクタの一部として文字列で使用しています。

その他のコーディング方法

今回の例では、Map（連想配列）の値が連想配列となる２次元連想配列のデータを使用しましたが、Map（連想配列）の値が配列となるデータを使用し、コーディングすることも可能です。

詳しくは以下のリンク先を参考にしてみてください。

【Sass】eachループ内でnth()を利用する例｜連想配列の値が配列のデータを扱う

コンパイル後のCSSソースコード

今回の例で使用したSassのソースコードは、コンパイルされると以下のCSSになります。

また、Sassのコンパイルの方法については以下のリンク先を参考にしてみてください。

Sassを自動コンパイルする方法｜node-sassのインストール・利用例【npm】

.sns-list {
  display: flex;
  justify-content: center;
  width: 100%;
}

.sns-list li {
  flex: 1 0 33%;
  position: relative;
  line-height: 1.0;
  text-align: center;
}
.sns-list li a {
  display: block;
  padding: 15px 0;
  padding-left: 1.4rem;
  font-size: 0.8rem;
  text-decoration: none;
}
.sns-list li a:before {
  position: absolute;
  top: 50%;
  margin-top: -0.7rem;
  margin-left: -1.8rem;
  font-size: 1.4rem;
  font-family: FontAwesome;
}

.sns-twitter {
  background-color: #00acee;
}
.sns-twitter a {
  color: #fff;
}
.sns-twitter a:before {
  content: "\f099";
  color: #fff;
}

.sns-fb {
  background-color: #3b5998;
}
.sns-fb a {
  color: #fff;
}
.sns-fb a:before {
  content: "\f09a";
  color: #fff;
}

.sns-pocket {
  background-color: #f03e51;
}
.sns-pocket a {
  color: #fff;
}
.sns-pocket a:before {
  content: "\f265";
  color: #fff;
}