Sass Interpolation of Mixin, Function, and Variable names

I'm trying to loop through a list of values in Sass and use interpolation of the current key to dynamically output class names that utilize @include and @extend, respectively.

Here is a pen showing the problem, simplified. http://codepen.io/ghepting/pen/vBmLy

As you can see in the markup, I have tried including the "_" inside of the interpolated string as well as outside of it. Is there something I'm missing to work around this limitation of how Sass supports interpolation?

(Note: the OP's pen has disappeared. This is not the original code found in the pen, but a rough approximation of the problem)

$error-light: red;
$error-dark: darken(red, 10%);

$success-light: green;
$success-dark: darken(green, 10%);

$dialogs: error, success;

@each $d in $dialogs {
  .#{$d} {
    background: $#{$d}-light;
  }
}

Solution 1:

Interpolation doesn't work on mixins or variables at this point in time. You'll have to come up with a different way to achieve your goal.

As of Sass 3.3, you can use mappings for this purpose for variables:

$dialogs:
    ( error:
        ( light: red
        , dark: darken(red, 10%)
        )
    , success:
        ( light: green
        , dark: darken(green, 10%)
        )
    );

@each $name, $colors in $dialogs {
  .#{$name} {
      color: map-get($colors, dark);
  }
}

And for functions:

@function green() {
  @return lighten(green, 10%);
}

@function red() {
  @return lighten(red, 10%);
}

@mixin my-bg($function-name) {
  background: call($function-name);
}

.foo {
  @include my-bg('red');
}