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

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

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

今回は、そのMapを使用したコーディングの例となり、2次元の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ボタンの共有リンクは貼っていません。共有リンクを作成する場合には、以下のリンク先を参考にしてみてください。

ソースコードの説明

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

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

$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ボタンのコーディングで使用するデータを、2次元連想配列のデータとして指定しています。

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

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

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

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

2次元連想配列のデータを、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(連想配列)の値が連想配列となる2次元連想配列のデータを使用しましたが、Map(連想配列)の値が配列となるデータを使用し、コーディングすることも可能です。

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

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

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

.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;
}

参考サイトなど

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はこちらから。

また、コメントは承認制となります。