列を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; }
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。