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