Sass Interpolation of Mixin, Function, and Variable names

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');
}

Leave a Comment