Question

我有颜色列表，我想像这样使用darken（）：

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

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

但是我收到了这个错误：

$ color：“＃FD5456”不是“变暗”的颜色

我尝试插入第n（）部分，但这也无济于事。

Answer 1

问题是，变暗函数需要将颜色作为第一个参数，而是尝试传递字符串。

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

Sass颜色变量在darken（）内部不起作用

2 个答案: