Function fails to return a value [duplicate] - function

Question

This question already has an answer here:
Sass error "Function X finished without #return"
(1 answer)
Closed 7 years ago.
I am using a sass snippet from this website to create color stacks.
$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);
}
}
}
Later in my code I want to use #each to give some elements different colors depending on their parent class
#each $category in foo, bar {
.cat-#{$category} {
.some-class {
background-color: color(#{$category}, pale);
}
}
}
I would expect this to compile to:
.cat-foo .some-class {
background-color: #f8a878; //the value of foo pale on the $color-stack map
}
Instead it throws and error: Function color did not return a value
If I replace the #{$category} with the string foo it works as expected.

Answer 1

This is because you are looking for a group with the value bar and with an id of pale. This does not exist in your map so the function does not return a value.
Add that and it works.
$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);