KiKiKi_KiKi score 582
2015/08/22 01:26 投稿
| SCSSの`rgba()`が関数として認識されるので、各色を別々に渡してあげるか、16進数表記などの$colorとアルファ値に分けて渡してあげないと上手く動作しないっぽいですね。 |
| この例ではrgbaと()の間にスペースがある為に()が無視されて文字列として出力されているのではないかと思います。 |
| [Module: Sass::Script::Functions rgba](http://sass-lang.com/documentation/Sass/Script/Functions.html#rgba-instance_method) |
| ``` |
| rgba($red, $green, $blue, $alpha) |
| rgba($color, $alpha) |
| ``` |
| 最も簡単な解決方法は、 |
| 配列にrgbaを付けてしまって置いて単純に文字列として出力してしまう方法だと思います。 |
| ついでに、配列が増えてもループ文を変更しなくても済むように`@each`文に変更してみました。 |
| ```scss |
| $bglist: rgba(232,110,164,.5), rgba(94,169,221,.5), rgba(120,193,91,.5); |
| .hoge { |
| width: 100px; |
| height: 100px; |
| @each $color in $bglist { |
| $index: index($bglist, $color); |
| &:nth-child(#{$index}) { |
| background-color: #{$color}; |
| } |
| } |
| } |
| ``` |
| Sass3.3からは連想配列が使えますので、次の様な書き方も可能です |
| ```scss |
| $bglist: (1: rgba(232,110,164,.5), 2: rgba(94,169,221,.5), 3: rgba(120,193,91,.5)); |
| .hoge { |
| width: 100px; |
| height: 100px; |
| @each $key, $color in $bglist { |
| &:nth-child(#{$key}) { |
| background-color: #{$color}; |
| } |
| } |
| } |
| ``` |
| --- |
| 追記 |
| カンマ区切りを配列としても扱えるようですので、`$color`を配列と捉えさせて |
| `rgba($red, $green, $blue, $alpha)`という渡し方もできなくはないっぽいです。 |
| ※ $bglistの各値が常に rgba の形式になってないとコンパイルエラー起こすと思いますが |
| ```scss |
| $bglist: (232,110,164,.5), (94,169,221,.5), (120,193,91,.5); |
| .hoge { |
| width: 100px; |
| height: 100px; |
| @each $color in $bglist { |
| $index: index($bglist, $color); |
| &:nth-child(#{$index}) { |
| background-color: rgba( nth($color, 1), nth($color, 2), nth($color, 3), nth($color, 4) ); |
| } |
| } |
| } |
| ``` |
KiKiKi_KiKi score 582
2015/08/22 01:03 投稿
| SCSSの`rgba()`が関数として認識されるので、各色を別々に渡してあげるか、16進数表記などの$colorとアルファ値に分けて渡してあげないと上手く動作しないっぽいですね。 |
| この例ではrgbaと()の間にスペースがある為に()が無視されて文字列として出力されているのではないかと思います。 |
| [Module: Sass::Script::Functions rgba](http://sass-lang.com/documentation/Sass/Script/Functions.html#rgba-instance_method) |
| ``` |
| rgba($red, $green, $blue, $alpha) |
| rgba($color, $alpha) |
| ``` |
| 最も簡単な解決方法は、 |
| 配列にrgbaを付けてしまって置いて単純に文字列として出力してしまう方法だと思います。 |
| ついでに、配列が増えてもループ文を変更しなくても済むように`@each`文に変更してみました。 |
| ```scss |
| $bglist: rgba(232,110,164,.5), rgba(94,169,221,.5), rgba(120,193,91,.5); |
| .hoge { |
| width: 100px; |
| height: 100px; |
| @each $color in $bglist { |
| $index: index($bglist, $color); |
| &:nth-child(#{$index}) { |
| background-color: #{$color}; |
| } |
| } |
| } |
| ``` |
| Sass3.3からは連想配列が使えますので、次の様な書き方も可能です |
| ```scss |
| $bglist: (1: rgba(232,110,164,.5), 2: rgba(94,169,221,.5), 3: rgba(120,193,91,.5)); |
| .hoge { |
| width: 100px; |
| height: 100px; |
| @each $index, $color in $bglist { |
| &:nth-child(#{$index}) { |
| @each $key, $color in $bglist { |
| &:nth-child(#{$key}) { |
| background-color: #{$color}; |
| } |
| } |
| } |
| ``` |
