Ditch the sass maps
Created by: MartijnCuppens
Continuing on https://github.com/twbs/bootstrap/pull/28445#issuecomment-473151602 and https://github.com/twbs/bootstrap/issues/27927#issuecomment-450583968. Copy/paste from @mdo s comment which describes the situation:
I think we need to ditch these built-in map-merge
s for regular Sass maps. It now feels over-engineered, and perhaps poorly documented for how folks can customize things.
With the usage of map-merge
everywhere, we have the ability to easily add key-value pairs, but not to remove them. There's no option in Sass to do this, but you can replace a value or add new ones (with map-merge
). This is an issue because if you want fewer key-value pairs in a Sass map, you'll see errors like those of https://github.com/twbs/bootstrap/issues/27927#issuecomment-450060013.
So, what if we remove all map-merge
in our variables?
Let's consider an example where we look at our $grid-breakpoints
.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
To replace all of the values, we redefine the keys' values:
$grid-breakpoints: (
xs: 0,
sm: 400px,
md: 800px,
lg: 1200px,
xl: 1600px
);
To replace individual key-value pairs, we use map-merge
:
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
$grid-breakpoints: map-merge($grid-breakpoints, (xl: 1600px));
To add additional values, we also use map-merge
:
$grid-breakpoints: map-merge(
$grid-breakpoints,
(
xxl: 1600px,
xxxl: 1800px
)
);
To do a bit of everything, we can use replace the default values and use multiple map-merge
s:
$grid-breakpoints: (
xs: 300px,
sm: 500px,
md: 800px,
lg: 1100px,
xl: 1400px
);
$grid-breakpoints: map-merge(
(
xxs: 0
),
$grid-breakpoints
);
$grid-breakpoints: map-merge(
$grid-breakpoints,
(
xxl: 1600px,
xxxl: 1800px
)
);