混合函數，函數和變量名的Sass插值

Question

我試圖循環訪問Sass中的值列表，並使用當前鍵的插值來動態輸出分別使用@include和@extend的類名稱。

下面是一個顯示問題的筆，簡化了。 http://codepen.io/ghepting/pen/vBmLy

正如您在標記中看到的那樣，我嘗試在內插字符串的內部以及外部包含「_」。有沒有什麼我錯過了Sass支持插值的這種限制？

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