是否可以在SASS中的變量中嵌套變量？

Question

我有一個混入接受一個參數，我想傳入一個變量。

@mixin my_mixin($arg) { 
    background-color: $state-#{$arg}-text; 
} 

Answer 1

目前在SASS中不可能插入變量名。下面是討論這個https://github.com/nex3/sass/issues/626

然而問題，你可以使用佔位符的插值：

%my-dark-styles { 
    background-color: #000; 
} 
%my-white-styles { 
    background-color: #FFF; 
} 

@mixin my_mixin($arg) { 
    @extend %my-#{$arg}-styles; 
} 

.header { 
    @include my_mixin("dark"); 
} 
.footer { 
    @include my_mixin("white"); 
} 

這編譯爲：

.header { 
    background-color: #000; } 

.footer { 
    background-color: #FFF; } 

Answer 2

由於薩斯3.3可以使用地圖也 http://blog.sass-lang.com/posts/184094-sass-33-is-released

下面是一個例子：

$state-light-text : #FFFFFF; 
$state-dark-text : #000000; 

$color-map: (//create a array to support the two colors light and dark 
    light: $state-light-text, 
    dark: $state-dark-text 
); 


@each $color-key, $color-var in $color-map { 
    .myclass--#{$color-key} { //will generate .myclass--light .myclass--dark 
     background-color: $color-var; // equal $state-light-text or $state-dark-text 
    } 
} 

這將彙編成：

.myclass--light { 
    background-color: #FFFFFF; 
} 

.myclass--dark { 
    background-color: #000000; 
}