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

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

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

今回は、そのMapを使用したコーディングの例となり、Map（連想配列）の要素の値がリスト（配列）となるデータを、eachループ内でnth関数を使い扱い、SNSボタンをコーディングする例となります。

連想配列の値が配列のデータを扱う例｜eachループ内でnth関数を利用
ソースコードの説明
コンパイル後のCSSソースコード

連想配列の値が配列のデータを扱う例｜eachループ内でnth関数を利用

例では、Twitter・Facebook・Instagram・YouTubeのSNSボタンのコーディングしています。なお、SNSボタンのリンクは貼っていません。

※SNSのアイコンは、アイコンフォントが使える『Font Awesome』のCDNを参照して使用しています。

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

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

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

ソースコードの説明

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

CSSで使用する値を、連想配列の要素の値を配列となるデータとして指定

$sns_list: (
	twitter: ("\f099", #fff, #00acee),
	fb     : ("\f09a", #fff, #3b5998),
	insta  : ("\f16d", #fff, #D93177),
	youtube: ("\f167", #fff, #cd201f)
);

上記ソースコードの箇所では、SNSボタンのCSSで使用する値を、連想配列の要素の値が配列となるデータとして指定しています。

連想配列のキーには「classの値で使用するSNS名」を指定し、値には以下の3つの「CSSプロパティの値」を、配列で順番に指定しています。

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

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

連想配列のデータを、eachループ内でnth関数を使い取得

@each $site_name, $value in $sns_list{
    .sns-#{$site_name} a{
        background-color: nth($value, 3);
        &:before{
            content: nth($value, 1);
            color: nth($value, 2);
        }
    }
}

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

eachループ

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

例では、inの右側に連想配列$sns_listを指定し、inの左側にキーを格納する$site_nameと、値を格納する$valueを指定しています。

nth関数

nth関数では、配列から指定したインデックス番号の値を取得します。第1引数には配列を指定し、第2引数には取得したい値のインデックス番号を指定します。

例では、連想配列$sns_listの要素の値となる配列$valueを第1引数に指定し、第2引数には、取得するプロパティの値により、それぞれのインデックス番号を指定しています。

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

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

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

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

今回の例では、Map（連想配列）の要素の値がリスト（配列）となるデータを使用しましたが、リストに指定するプロパティが多い場合には、どの順番で何を指定したか分かりづらくなると思います。

そのような場合には、Map（連想配列）の要素の値が連想配列となるデータを使用すると、可読性が良いと思います。詳しくは以下のリンク先を参考にしてみてください。

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

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

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

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

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

@charset "UTF-8";
.sns-list {
  display: flex;
  justify-content: center;
  width: 100%;
}

.sns-list li {
  position: relative;
}
.sns-list li a {
  display: block;
  width: 50px;
  height: 50px;
  margin: 5px;
  border-radius: 25px;
  text-decoration: none;
}
.sns-list li a:before {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -0.9rem;
  margin-left: -0.8rem;
  font-size: 1.8rem;
  font-family: FontAwesome;
}

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

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

.sns-insta a {
  background-color: #D93177;
}
.sns-insta a:before {
  content: "";
  color: #fff;
}

.sns-youtube a {
  background-color: #cd201f;
}
.sns-youtube a:before {
  content: "";
  color: #fff;
}