使用SASS映射函数代替变量插值

Question

我尝试使用地图定义（实际上，覆盖）一些SASS变量，代替我通常使用变量插值所做的事情。这是配置一个bootstrap主题，所以我不认为我可以有效地重写下游使用地图。

目前我正在这样做：

$btn-default-color:              $color-text;
$btn-default-bg:                 $color-white;
$btn-default-border:             $btn-default-bg;

$btn-primary-color:              #fff !default;
$btn-primary-bg:                 $brand-primary !default;
$btn-primary-border:             darken($btn-primary-bg, 5%) !default;

$btn-success-color:              #fff !default;
$btn-success-bg:                 $brand-success !default;
$btn-success-border:             darken($btn-success-bg, 5%) !default;

$btn-info-color:                 #fff !default;
$btn-info-bg:                    $brand-info !default;
$btn-info-border:                darken($btn-info-bg, 5%) !default;

$btn-warning-color:              #fff !default;
$btn-warning-bg:                 $brand-warning !default;
$btn-warning-border:             darken($btn-warning-bg, 5%) !default;

$btn-danger-color:               #fff !default;
$btn-danger-bg:                  $brand-danger !default;
$btn-danger-border:              darken($btn-danger-bg, 5%) !default;

相反，我想创建这样的地图，然后运行@each循环：

$btn-colors-map: (
    default: (
        bg: $color-white,
        bg-hover: $color-ghost,
        border: $color-white,
        border-hover: $color-ghost
    ),
    primary: (
        bg: $color-white,,
        bg-hover: $color-ghost,
        border: $color-white,
        border-hover: $color-ghost
    )
)

// poor pseudo-code, sorry!
@each $key, $btn in $btn-colors-map {
    $btn#{$key}-color: $btn[bg];
}

但不幸的是，我在SASS地图上阅读的文档非常具有技术性，并且提供了关于如何实际解决var插值差距的实际例子。我还没弄明白如何让它真正起作用（或者它在技术上是否可行）。