SCSSで配列を扱う方法

SCSSで配列の値を使った記述方法についてです。

SCSSでの配列の書き方

SCSSで配列を作成するには下記のように書くことで設定できます。

$colors: red, green, blue;

使い方

作成した配列を実際に使う方法についてです。

SCSSの記述

// 配列
$colors2: red, green, blue;

// 使い方
@each $color in $colors2 {
  .bg-#{$color} {
    background-color: $color;
  }
}

出力結果

.bg-red {
  background-color: red;
}

.bg-green {
  background-color: green;
}

.bg-blue {
  background-color: blue;
}

マップ配列の書き方

SCSSで連想はいつのようにKeyや値を使う場合は下記のように記述します。

$colors: (
  'red': #f00,
  'green': #0f0,
  'blue': #00f
);

使い方

作成した配列を実際に使う方法についてです。

SCSSの記述

// 配列
$colors: (
  'red': #f00,
  'green': #0f0,
  'blue': #00f
);

// 使い方
@each $color, $val in $colors {
  .bg-#{$color} {
    background-color: $val;
  }
}

出力結果

.bg-red {
  background-color: #f00;
}

.bg-green {
  background-color: #0f0;
}

.bg-blue {
  background-color: #00f;
}

通常の配列とは異なり、Keyと値を別々に設定することができるため
色指定などで便利です。

配列のインデックス（順番）を表示させる方法

配列を @each で回している中で、要素の順番を利用したい場合は
以下の様にインデックスを取得することができます。

index($array, 'val')

使い方

SCSSの記述

// 配列
$array: 'val1', 'val2', 'val3';

// 使い方
@each $val in $array {
  .#{$val} {
    content: index($array, $val);
  }
}

出力結果

.val1 {
  content: 1;
}

.val2 {
  content: 2;
}

.val3 {
  content: 3;
}

マップのインデックス（順番）を表示させる方法

マップ配列でインデックスを利用するには先述の方法ではうまく動作しません。
マップ配列のの場合は以下のように設定します。

使い方

SCSSの記述

// 配列
$colors2: (
  'red': #f00,
  'green': #0f0,
  'blue': #00f
);

// 使い方
$num: 0;
@each $color, $val in $colors2 {
  $num: $num + 1;
  .bg-#{$color} {
    background-color: $val;
    content: 'num-#{$num}';
  }
}

出力結果

.bg-red {
  background-color: #f00;
  content: "num-1";
}

.bg-green {
  background-color: #0f0;
  content: "num-2";
}

.bg-blue {
  background-color: #00f;
  content: "num-3";
}

@each でループを回す前に、$num というインデックス用の変数を作成します。
そしてループ内で $num を1ずつ足して行きインデックスを作成します。

おまけ

おまけでちょっと複雑な配列の書き方を紹介します。

配列

$fruit: (
  'apple': (
    'apple-a.png',
    'apple-b.png',
  ),
  'strawberry': (
    'strawberry-a.png',
    'strawberry-b.png',
    'strawberry-c.png',
  ),
  'orange': (
    'orange-a.png',
  ),
  'banana': (
    'banana-a.png',
  ),
  'grape': (
    'grape-a.png',
    'grape-b.png',
  ),
) !default;

果物の画像を表示する想定で配列を作成しました。

Keyは果物名前で、値には各画像のファイル名を入れています。

それぞれの果物の画像の数は不定で、増えたり減ったりすることを想定しています。

scssの記述

この配列から、果物ごとにスタイルを設定します。

@each $key, $val in $fruit {
  $num: 0;
  @each $image in $val {
    $num: $num + 1;
    &.icon-#{$key}-#{$num} {
      background-image: url(images/#{$image});
    }
  }
}

$fruit の配列を @each で回します。
最初の @each では果物名のKey別にループします。
果物名が変わる段階で $num を初期化（数値を0）にします。

2つ目の @each では、各くだもの事に値で持っている配列（画像のファイル名が入っている）のループを回します。

2つ目のループの中では、最初のプールで取得している果物名（$key）とインデックス（$num）を
class名に使い、画像のファイル名（$image）を値として設定します。

出力結果

.icon-apple-1 {
	background-image: url(images/apple-a.png);
}

.icon-apple-2 {
	background-image: url(images/apple-b.png);
}

.icon-strawberry-1 {
	background-image: url(images/strawberry-a.png);
}

.icon-strawberry-2 {
	background-image: url(images/strawberry-b.png);
}

.icon-strawberry-3 {
	background-image: url(images/strawberry-c.png);
}

.icon-orange-1 {
	background-image: url(images/orange-a.png);
}

.icon-banana-1 {
	background-image: url(images/banana-a.png);
}

.icon-grape-1 {
	background-image: url(images/grape-a.png);
}

.icon-grape-2 {
	background-image: url(images/grape-b.png);
}

不特定多数の配列の要素に合わせて画像設定用のスタイルを設定することができました。

このように配列にしてスタイルを設定することで、配列の中身が増減しても @each 内のコードを修正する必要がないため、簡単に要素を変更することができます。

また、SCSSの記述が少なくできることも魅力の一つです。