Mixin，函数和variables名称的Sass插值

我试图循环访问Sass中的值列表，并使用当前键的插值来dynamic输出分别使用@include和@extend的类名称。

这是一个显示问题的笔，简化。 http://codepen.io/ghepting/pen/vBmLy

正如你在标记中看到的那样，我已经尝试在内插string的内部以及外部包括“_”。 有什么我错过了Sass支持插值的这个限制吗？

（注意：OP的笔已经消失了，这不是在笔中find的原始代码，而是大概的问题）

$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

此时插值对混合或variables不起作用。 你将不得不想出一个不同的方式来实现你的目标。

从Sass 3.3开始，你可以为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); } } 

而对于function：

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