薩斯顏色變量未對他們的工作裏面變暗（）

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%); 
     } 
    } 
    } 
}