Sass颜色变量在dark()内部不起作用

Question

我有一个颜色列表，我想对它们使用dark（），如下所示：

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

但我得到了这个错误：

$color:"#FD5456"不是"变暗"的颜色

我试着插入nth（）部分，但也无济于事。

Answer 1

问题是darken函数需要一个颜色作为第一个参数，而您正试图传递一个字符串。

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

因此，您应该删除$innerPagesBgColors:中的所有引号

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

Answer 2

在我的案例中，我解决了这个问题。

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