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).