函数无法返回值

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

如果我r将#{$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);