函数无法返回值

debugcn 发表于 Dev

Ithil

我正在使用此网站上的一段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它将按预期工作。

柯林·培根

这是因为您正在寻找具有值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);

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。