Web Development & Design. Since 2000.

WEBLOG

コーディング > Sass (SCSS)

【Sass】eachで配列をループさせつつ、且つ連番を振る

Create：

Update：

Category：コーディングSass (SCSS)

目次

こんにちは。三度のSassよりSassが好き、Sassの可能性を愛してやまないコーダーです。

@each や @for を用いた繰り返し処理、便利ですよね。
様々な要素を一括管理できる便利さは、一度味わうともう手放せません。

連番はその中でも使用頻度の高い要素の一つですが、たまに「出来そうで出来ない」といったケースに遭遇する事があります。

今日はそんな連番における「出来そうで出来ない」を解決する為、基本から応用までご紹介しようと思います。

@for を用いた基本的な連番の記述

Sassで繰り返し記述をする際、このように @for を用いて連番を振るケースが多いと思います。

SCSS

@for $i from 1 through 3 {
	.XXX_#{$i} {
		order: $i;
	}
}

コンパイル結果

.XXX_1 {
  order: 1;
}

.XXX_2 {
  order: 2;
}

.XXX_3 {
  order: 3;
}

このようにシンプルに連番だけ振りたい場合は上記の @for で事足りるのですが、たとえば下記のような繰り返しを行いたいと思う事はないでしょうか。

.aaa {
  order: 1; //連番
  background-image: url(/images/aaa.jpg);
}

.bbb {
  order: 2; //連番
  background-image: url(/images/bbb.jpg);
}

.ccc {
  order: 3; //連番
  background-image: url(/images/ccc.jpg);
}

今回の記事では、そんなケースで役立つ記述方法を紹介します。

@each でのループで連番を付与する

Sassではindex関数を用いることで、配列に割り振られているインデックスを取得することができます。
「インデックスって何？」という方は、とりあえず↓を見ていただけると早いと思います。

SCSS

$array: 'aaa', 'bbb', 'ccc';
.aaa {
	content: 'aaaのインデックスは ' + index($array, 'aaa') + ' です。';
}
.bbb {
	content: 'bbbのインデックスは ' + index($array, 'bbb') + ' です。';
}
.ccc {
	content: 'cccのインデックスは ' + index($array, 'ccc') + ' です。';
}

コンパイル結果

.aaa {
  content: "aaaのインデックスは 1 です。";
}

.bbb {
  content: "bbbのインデックスは 2 です。";
}

.ccc {
  content: "aaaのインデックスは 3 です。";
}

このように、aaa, bbb, cccにはそれぞれ1,2,3..と順番にインデックスが割り振られている事がわかります。
この仕組みを応用すれば、eachの際に連番を出力することができます。

SCSS

$array: 'aaa', 'bbb', 'ccc';
@each $val in $array {
	$num: index($array, $val);
	.#{$val} {
		order: $num;
		background-image: url(/images/#{$val}.jpg);
	}
}

コンパイル結果

.aaa {
  order: 1;
  background-image: url(/images/aaa.jpg);
}

.bbb {
  order: 2;
  background-image: url(/images/bbb.jpg);
}

.ccc {
  order: 3;
  background-image: url(/images/ccc.jpg);
}

配列が連想配列（マップ）の場合の連番

ただし配列がマップの場合、この通りインデックスが取得できません。

失敗例

SCSS

$array: (
	aaa: 'hogehoge',
	bbb: 'fugafuga',
	ccc: 'piyopiyo'
);
.aaa {
	content: 'aaaのキーは ' + index($array, 'aaa') + ' です。';
}

コンパイル結果

.aaa {
  content: "aaaのキーは  です。"; //取得できない
}

ここで躓いてしまい、仕方なく渋々1,2,3..と手打ちで割り振ったコーダーも多いかと思われます。
（私もそうでした）

ですが大丈夫です。マップにも連番は付与できます。そう、四則演算ならね。

ループごとに数値を加算して連番を与える

初期値が0の $num に、ループのたびに+1されていくことで連番となります。

SCSS

$array: (
	aaa: 'hogehoge',
	bbb: 'fugafuga',
	ccc: 'piyopiyo'
);
$num: 0;
@each $key, $val in $array {
	$num: $num + 1;
	.#{$key} {
		order: $num;
		background-image: url(/images/#{$val}.jpg);
	}
}

コンパイル結果

.aaa {
  order: 1;
  background-image: url(/images/hogehoge.jpg);
}

.bbb {
  order: 2;
  background-image: url(/images/fugafuga.jpg);
}

.ccc {
  order: 3;
  background-image: url(/images/piyopiyo.jpg);
}

応用例

四則演算を用いた連番付与は、様々な応用を効かせることができます。
単純に1ずつのカウントアップだけでなく、開始番号の変更、数値の増減数、子番号の付与など、連番に関するだいたいの事はこれで解決できます。

今回はその一例をご紹介します。

連番の開始番号や増減値をカスタム

5,10,15…と倍数で増やしたり、逆に20,15,10…と減らしたりしていく方法です。

SCSS

$array: (
	aaa: 'hogehoge',
	bbb: 'fugafuga',
	ccc: 'piyopiyo'
);
$num: 30; //30からスタート
@each $key, $val in $array {
	$num: $num - 10; //1ループごとに10ずつ減らしていく
	.#{$key} {
		order: $num;
		background-image: url(/images/#{$val}.jpg);
	}
}

コンパイル結果

.aaa {
  order: 20;
  background-image: url(/images/hogehoge.jpg);
}

.bbb {
  order: 10;
  background-image: url(/images/fugafuga.jpg);
}

.ccc {
  order: 0;
  background-image: url(/images/piyopiyo.jpg);
}

親子番号を付与

01-01, 01-02, 01-03… 02-01, 02-02, 02-03…と、親子番号を付与する方法です。
画像類では「01-02.jpg」等のゼロパディングが付いているケースが多いと思うので、一緒に記載しておきます。

SCSS

$array: (
	aaa: red,
	bbb: blue,
	ccc: green,
);
$i: 0;
@each $key, $val in $array {
	$i: $i + 1;
	$num: $i; //親番号
	@if $i < 10 {
		$num: 0 + '#{$i}'; //親番号（10以下なら頭に0をつける）
	}
	@for $child_i from 1 through 3 {
		$child_num: $child_i; //子番号
		@if $child_i < 10 {
			$child_num: 0 + '#{$child_i}'; //子番号（10以下なら頭に0をつける）
		}
		.#{$key + '_' + $num + '_' + $child_num} {
			background-color: $val;
			background-image: url(/images/#{$key + '_' + $num + '_' + $child_num}.jpg);
		}
	}
}

コンパイル結果

.aaa_01_01 {
  background-color: red;
  background-image: url(/images/aaa_01_01.jpg);
}

.aaa_01_02 {
  background-color: red;
  background-image: url(/images/aaa_01_02.jpg);
}

.aaa_01_03 {
  background-color: red;
  background-image: url(/images/aaa_01_03.jpg);
}

.bbb_02_01 {
  background-color: blue;
  background-image: url(/images/bbb_02_01.jpg);
}

.bbb_02_02 {
  background-color: blue;
  background-image: url(/images/bbb_02_02.jpg);
}

.bbb_02_03 {
  background-color: blue;
  background-image: url(/images/bbb_02_03.jpg);
}

.ccc_03_01 {
  background-color: green;
  background-image: url(/images/ccc_03_01.jpg);
}

.ccc_03_02 {
  background-color: green;
  background-image: url(/images/ccc_03_02.jpg);
}

.ccc_03_03 {
  background-color: green;
  background-image: url(/images/ccc_03_03.jpg);
}

それでは、良き連番ライフを。

pagetop
loading