回答編集履歴

2

$colorを配列として扱う方法

2015/08/21 16:26

投稿

KiKiKi_KiKi
KiKiKi_KiKi

スコア596

test CHANGED
@@ -81,3 +81,49 @@
81
81
  }
82
82
 
83
83
  ```
84
+
85
+
86
+
87
+ ---
88
+
89
+
90
+
91
+ 追記
92
+
93
+
94
+
95
+ カンマ区切りを配列としても扱えるようですので、`$color`を配列と捉えさせて
96
+
97
+ `rgba($red, $green, $blue, $alpha)`という渡し方もできなくはないっぽいです。
98
+
99
+ ※ $bglistの各値が常に rgba の形式になってないとコンパイルエラー起こすと思いますが
100
+
101
+ ```scss
102
+
103
+ $bglist: (232,110,164,.5), (94,169,221,.5), (120,193,91,.5);
104
+
105
+
106
+
107
+ .hoge {
108
+
109
+ width: 100px;
110
+
111
+ height: 100px;
112
+
113
+
114
+
115
+ @each $color in $bglist {
116
+
117
+ $index: index($bglist, $color);
118
+
119
+ &:nth-child(#{$index}) {
120
+
121
+ background-color: rgba( nth($color, 1), nth($color, 2), nth($color, 3), nth($color, 4) );
122
+
123
+ }
124
+
125
+ }
126
+
127
+ }
128
+
129
+ ```

1

変数名を変更

2015/08/21 16:26

投稿

KiKiKi_KiKi
KiKiKi_KiKi

スコア596

test CHANGED
@@ -68,9 +68,9 @@
68
68
 
69
69
 
70
70
 
71
- @each $index, $color in $bglist {
71
+ @each $key, $color in $bglist {
72
72
 
73
- &:nth-child(#{$index}) {
73
+ &:nth-child(#{$key}) {
74
74
 
75
75
  background-color: #{$color};
76
76