回答編集履歴
2
$colorを配列として扱う方法
answer
CHANGED
|
@@ -39,4 +39,27 @@
|
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
---
|
|
45
|
+
|
|
46
|
+
追記
|
|
47
|
+
|
|
48
|
+
カンマ区切りを配列としても扱えるようですので、`$color`を配列と捉えさせて
|
|
49
|
+
`rgba($red, $green, $blue, $alpha)`という渡し方もできなくはないっぽいです。
|
|
50
|
+
※ $bglistの各値が常に rgba の形式になってないとコンパイルエラー起こすと思いますが
|
|
51
|
+
```scss
|
|
52
|
+
$bglist: (232,110,164,.5), (94,169,221,.5), (120,193,91,.5);
|
|
53
|
+
|
|
54
|
+
.hoge {
|
|
55
|
+
width: 100px;
|
|
56
|
+
height: 100px;
|
|
57
|
+
|
|
58
|
+
@each $color in $bglist {
|
|
59
|
+
$index: index($bglist, $color);
|
|
60
|
+
&:nth-child(#{$index}) {
|
|
61
|
+
background-color: rgba( nth($color, 1), nth($color, 2), nth($color, 3), nth($color, 4) );
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
42
65
|
```
|
1
変数名を変更
answer
CHANGED
|
@@ -33,8 +33,8 @@
|
|
|
33
33
|
width: 100px;
|
|
34
34
|
height: 100px;
|
|
35
35
|
|
|
36
|
-
@each $
|
|
36
|
+
@each $key, $color in $bglist {
|
|
37
|
-
&:nth-child(#{$
|
|
37
|
+
&:nth-child(#{$key}) {
|
|
38
38
|
background-color: #{$color};
|
|
39
39
|
}
|
|
40
40
|
}
|