Using SASS map function instead of variable interp

2019-02-28 08:27发布

问题:

I'm trying to define (actually, overwrite) some SASS variables using a map, in place of what I normally would have done with variable interpolation. This is configuring a bootstrap theme, so I don't think I can effectively rewrite the downstream to use maps.

Currently I'm doing this:

$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;

Instead, I'd like to create map like this, and run an @each loop instead:

$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];
}

But unfortunately the docs I've read on SASS maps are very technical, and provide little real-world examples on how to actually solve the var interpolation gap. I've yet to figure out how to make this actually work (or if it's even technically feasible).

标签: css sass