Sass color variable not working inside darken()

Question

I've got list of colors and I would like to use darken() on them like so:

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

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

But I get this error:

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

I tried interpolating the nth() portion but that didn't help either.

Answer 1

The problem is that darken function requires a color as first argument and, instead, you're trying to pass a string.

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

So you should remove all quotes in $innerPagesBgColors:

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

Answer 2

In my case I solved with this.

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