サスカラー変数が暗く内部で動作していない（）

Question

私は色のリストを持っていると私は（暗いを使用したい）それらの上にそのような：

$innerPagesBgColors: "#6B46C1", "#2980B9", "#FD5456", "#000"; 

.foo { 
    color: darken(nth($innerPagesBgColors, 3), 5%); 
} 

しかし、私はこのエラーを取得する：

$color: "#FD5456" is not a color for `darken'

nth（）部分を補間しようとしましたが、それでも役に立たなかったです。

Answer 1

darken関数は、最初の引数として色を必要とし、代わりに文字列を渡そうとしています。

type-of(#6B46C1); // returns color 
type-of("#6B46C1"); // returns string 

ですから、$innerPagesBgColors内のすべての引用符を削除する必要があります。私の場合は

$innerPagesBgColors: #6B46C1, #2980B9, #FD5456, #000; 

Answer 2

を私はこれで解決。

@each $name, $color in $set_colors{ 
    // check type-of before 
    @if (type-of($color) == 'color'){ 
    .color-#{$name}{ 
     color: #{$color}; 
    } 

    .background-#{$name}{ 
     background-color: $color; 

     &:hover{ 
     background-color: darken($color, 10%); 
     } 
    } 
    } 
}