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
Post a Comment