Sass Farbe Variable nicht innerhalb verdunkeln Arbeits()

Question

I Liste der Farben haben, und ich möchte verdunkeln() verwenden, auf sie wie so:

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

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

Aber ich bekomme diese Fehlermeldung:

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

Ich habe versucht, den nth() Teil interpolieren, aber das hat auch nicht geholfen.

Answer 1

Das Problem ist, dass Darken-Funktion eine Farbe als erstes Argument erfordert und stattdessen versuchen, eine Zeichenfolge zu übergeben.

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

So sollten Sie alle Zitate in $innerPagesBgColors entfernen:

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

Answer 2

In meinem Fall habe ich mit diesem gelöst.

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