如何在SCSS中的另一個變量中使用變量

Question

如何在另一個變量中使用變量？ 我怎麼可以這樣做：

$buttons: default, success, primary, info, warning, danger; 

$default_color: #aaa; 
$success_color: #bbb; 
$primary_color: #ccc; 
$info_color: #ddd; 
$warning_color: #eee; 
$danger_color: #fff; 


@each $b in $buttons { 
    .btn-#{$b} { 
    color: $#{b}_color; 
    } 
} 

Answer 1

您正在尋找在SCSS沒有實現還的方式，但你可以做這樣的事情：

$default_color: #aaa; 
$success_color: #bbb; 
$primary_color: #ccc; 
$info_color: #ddd; 
$warning_color: #eee; 
$danger_color: #fff; 

$buttonsList: 
    "default" $default_color, 
    "success" $success_color, 
    "primary" $primary_color, 
    "info" $info_color, 
    "warning" $warning_color, 
    "danger" $danger_color; 

@each $b in $buttonsList { 
    .btn-#{nth($b, 1)} { 
    color: nth($b, 2); 
    } 
} 

Sassmeister link。

Answer 2

Sass不允許動態創建或訪問變量。 改爲使用地圖 http://sass-lang.com/documentation/file.SASS_REFERENCE.html#maps 示例：https://stackoverflow.com/a/17978519