是否可以在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; 
}