密新，功能，和变量名的萨斯插值(Sass Interpolation of Mixin, Funct

我通过萨斯值列表试图循环并使用当前关键的插值分别利用@include和@extend，动态输出类名。

这里是表示该问题的笔，简化。 http://codepen.io/ghepting/pen/vBmLy

正如你可以在标记看，我已经尝试了包括“_”插值串的内部以及在它​​之外。 有什么我缺少解决此限制的萨斯如何支持插值？

（注：该OP的笔已经消失这不是在笔中发现的原代码，但问题的一个粗略的估计）

$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;
  }
}

Answer 1:

插值并不在这个时间点上混入或变量的工作。 你必须拿出不同的方式来实现自己的目标。

由于萨斯3.3，你可以使用映射为此变量：

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

而对于功能：

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

文章来源: Sass Interpolation of Mixin, Function, and Variable names