Sass-Farbenvariable funktioniert nicht innerhalb von darken()

Question

Ich habe eine Liste von Farben und möchte darken() darauf anwenden, wie folgt:

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

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

Aber ich bekomme diesen Fehler:

$color: "#FD5456" ist keine Farbe für `darken'

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

Answer 1

Das Problem ist, dass die verdunkeln-Funktion eine Farbe als ersten Argument erfordert und stattdessen versuchen Sie, einen String zu übergeben.

type-of(#6B46C1); // gibt Farbe zurück
type-of("#6B46C1"); // gibt String zurück

Sie sollten also alle Anführungszeichen in $innerPagesBgColors entfernen:

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

Answer 2

In meinem Fall habe ich das mit diesem gelöst.

@each $name, $color in $set_colors{
  // Vorher Typ überprüfen
  @if (type-of($color) == 'color'){
    .color-#{$name}{
      color: #{$color};
    }

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

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