【scss】リスト内に括弧を代入する方法につきまして

質問内容

掲題の件につきまして

現実コードではrgbaに括弧がない状態です。

求めている夢コードの様に出力させたく
試行錯誤してみましたが、夢を実現できないため
ご質問させていただきました。

質問内容としてはリストに括弧を代入とさせていただきましたが
他の方法で夢を実現できればご教示願います。

宜しくお願い致します。

・scss

.hoge{

width: 100px;
height: 100px;

$bglist:(232,110,164,.5),(94,169,221,.5),(120,193,91,.5);

@for $i from 1 through 3{
&:nth-child(#{$i}){
background-color:rgba nth($bglist,$i)
}
}

}

・現実コード

.hoge {

width: 100px;
height: 100px;
}
.hoge:nth-child(1) {
background-color: rgba 232, 110, 164, 0.5;
}
.hoge:nth-child(2) {
background-color: rgba 94, 169, 221, 0.5;
}
.hoge:nth-child(3) {
background-color: rgba 120, 193, 91, 0.5;
}

・夢コード

.hoge {

width: 100px;
height: 100px;
}
.hoge:nth-child(1) {
background-color: rgba(232, 110, 164, 0.5);
}
.hoge:nth-child(2) {
background-color: rgba(94, 169, 221, 0.5);
}
.hoge:nth-child(3) {
background-color: rgba(120, 193, 91, 0.5);
}

行動規範の内容に同意します

回答1件

ベストアンサー

SCSSのrgba()が関数として認識されるので、各色を別々に渡してあげるか、16進数表記などの$colorとアルファ値に分けて渡してあげないと上手く動作しないっぽいですね。
この例ではrgbaと()の間にスペースがある為に()が無視されて文字列として出力されているのではないかと思います。
Module: Sass::Script::Functions rgba

rgba($red, $green, $blue, $alpha)
rgba($color, $alpha)

最も簡単な解決方法は、
配列にrgbaを付けてしまって置いて単純に文字列として出力してしまう方法だと思います。
ついでに、配列が増えてもループ文を変更しなくても済むように@each文に変更してみました。

scss
1$bglist: rgba(232,110,164,.5), rgba(94,169,221,.5), rgba(120,193,91,.5);
2
3.hoge {
4  width: 100px;
5  height: 100px;
6
7  @each $color in $bglist {
8    $index: index($bglist, $color);
9    &:nth-child(#{$index}) {
10      background-color: #{$color};
11    }
12  }
13}

Sass3.3からは連想配列が使えますので、次の様な書き方も可能です

scss
1$bglist: (1: rgba(232,110,164,.5), 2: rgba(94,169,221,.5), 3: rgba(120,193,91,.5));
2
3.hoge {
4  width: 100px;
5  height: 100px;
6
7  @each $key, $color in $bglist {
8    &:nth-child(#{$key}) {
9      background-color: #{$color};
10    }
11  }
12}

追記

カンマ区切りを配列としても扱えるようですので、$colorを配列と捉えさせて
rgba($red, $green, $blue, $alpha)という渡し方もできなくはないっぽいです。
※ $bglistの各値が常に rgba の形式になってないとコンパイルエラー起こすと思いますが

scss
1$bglist: (232,110,164,.5), (94,169,221,.5), (120,193,91,.5);
2
3.hoge {
4  width: 100px;
5  height: 100px;
6
7  @each $color in $bglist {
8    $index: index($bglist, $color);
9    &:nth-child(#{$index}) {
10      background-color: rgba( nth($color, 1), nth($color, 2), nth($color, 3), nth($color, 4) );
11    }
12  }
13}