Sass Interpolation of Mixin, Function, and Variable names -


i'm trying loop through list of values in sass , use interpolation of current key dynamically output class names utilize @include , @extend, respectively.

here pen showing problem, simplified. http://codepen.io/ghepting/pen/vbmly

as can see in markup, have tried including "_" inside of interpolated string outside of it. there i'm missing work around limitation of how sass supports interpolation?

(note: op's pen has disappeared. not original code found in pen, rough approximation of 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;   } } 

interpolation doesn't work on mixins or variables @ point in time. you'll have come different way achieve goal.

as of sass 3.3, can use mappings purpose 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 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'); } 

Comments