【Sass3.3】連想配列を使用した@each内でインデックスキーを取得したい

Question

列を2つ定義せず連想配列を使用して定義した場合、
エラーが出てしまいインデックスの値が取ることができずに困っています。
エラーの内容は$keyが空が原因のシンタックスエラーです。

連想配列でのインデックス値の取り方がわかる方いらっしゃいましたら教えて頂きたく思います。

【Sass文】

$fruit: (
	apple: #FF0000,
	lemon: #FFEB3B,
	peach: #E91E63
);

@each $name, $color in $fruit {
	$key: index( $fruit, $name );
	li{
		&:nth-child(#{$key}){
			background: url('../images/#{$name}.png') #{$color};
		}
	}
}

【CSS（このような出力になってほしい）】

li:nth-child(1) { background: url("../images/apple.png") #FF0000; }
li:nth-child(2) { background: url("../images/lemon.png") #FFEB3B; }
li:nth-child(3) { background: url("../images/peach.png") #E91E63; }

Answer 1

ちょっと格好悪いですが、これで出来ました。
sass 3.4.21

番号部分はインデックスという意味でidxにしました。

$fruit: (
    0: (
        apple, #FF0000
    ),
    1: (
        lemon, #FFEB3B
    ),
    2: (
        peach, #E91E63
    )
);

@each $idx, $item in $fruit {
    $key: nth($item, 1);
    $val: nth($item, 2);
    li{
        &:nth-child(#{$idx}){
            background: url('../images/#{$key}.png') #{$val};
        }
    }
}

どうでしょうか。

Answer 2

$key: index( $fruit, $name );

この部分、もしかしてだけど、$fruit自体に数値としてのインデックスがないからじゃないですかね。
あるのは連想配列のkeyなんで、文字列だし。

$iとかつくっていてレート内でインクリメントするのがよいかな。

参考になれば幸いっす。

Comments

[J0110]

ogaaaanさん
早速ご回答ありがとうございます。
お返事が遅くなって申し訳ありません。

$fruitの中でインデックスとなるような数字を設けるということですよね。
やはり手動的なやり方になってしまいますよね＞＜
回答の捉え方が間違えてましたらすいません。

理想としては、
$fruitの中の配列が1000個とか多くなった場合は手動だとミスが出てしまうので、
自動で上から番号（1スタート）が振られると良いんですが...

[ogaaaan]

なかなか時間なくて遅れましたが、
sass 3.4.21で出来ました。

ハイライト表示したいので別回答でコメントしますね。