title: Function fails to return a value
body: <p>I am using a sass snippet from <a href="http://hmphry.com/useful-sass-mixins" rel="nofollow">this website</a> to create color stacks.</p>
  
  <pre><code>$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);
      }
    }
  }
  </code></pre>
  
  <p>Later in my code I want to use <code>@each</code> to give some elements different colors depending on their parent class</p>
  
  <pre><code>@each $category in foo, bar {
      .cat-#{$category} {
          .some-class {
              background-color: color(#{$category}, pale);
          }
      }
  }
  </code></pre>
  
  <p>I would expect this to compile to:</p>
  
  <pre><code>.cat-foo .some-class {
      background-color: #f8a878; //the value of foo pale on the $color-stack map
  }
  </code></pre>
  
  <p>Instead it throws and error: <code>Function color did not return a value</code></p>
  
  <p>If I replace the <code>#{$category}</code> with the string <code>foo</code> it works as expected. </p>