statement - La variable de color Sass no funciona dentro de oscurecer()

sass tutorial

Question

Tengo una lista de colores y me gustaría usar el método de oscurecimiento () en ellos de esta manera:

$innerPagesBgColors: "#6B46C1", "#2980B9", "#FD5456", "#000";
.foo {
color: darken(nth($innerPagesBgColors, 3), 5%);
}

Pero me sale este error:

$ color: "# FD5456" no es un color para "oscurecer"

Traté de interpolar la porción nth (), pero eso tampoco ayudó.

Answer 1

El problema es que la función de oscurecimiento requiere un color como primer argumento y, en cambio, está tratando de pasar una cadena.

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

Por lo tanto, debe eliminar todas las comillas en $innerPagesBgColors :

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

Answer 2

En mi caso, resolví con esto.

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