Question

我使用来自this website的sass片段来创建颜色堆栈。

$color-stack:
(group: foo, id: normal, color: #e67835),
(group: foo, id: pale, color: #f8a878),
(group: foo, id: dark, color: #ad490c),
(group: bar, id: normal, color: #426682);

// Color  Function
@function color($group, $shade:normal, $transparency:1){
  @each $color in $color-stack{
    $c-group: map-get($color, group);
    $c-shade: map-get($color, id);
    @if($group == map-get($color, group) and $shade == map-get($color, id)){
      @return rgba(map-get($color, color), $transparency);
    }
  }
}

稍后在我的代码中，我想使用@each根据父类提供一些不同颜色的元素

@each $category in foo, bar {
    .cat-#{$category} {
        .some-class {
            background-color: color(#{$category}, pale);
        }
    }
}

我希望这可以编译为：

.cat-foo .some-class {
    background-color: #f8a878; //the value of foo pale on the $color-stack map
}

而是抛出错误：Function color did not return a value

如果我用字符串#{$category}替换foo，它会按预期工作。

Answer 1

这是因为您正在寻找值为bar且ID为pale的群组。这在地图中不存在，因此该函数不会返回值。

添加它并且有效。

$color-stack:
(group: foo, id: normal, color: #e67835),
(group: foo, id: pale, color: #f8a878),
(group: foo, id: dark, color: #ad490c),
(group: bar, id: normal, color: #426682),
(group: bar, id: pale, color: #000);

函数无法返回值

1 个答案: