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-merges 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-merges:

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

You can see all of this in this Sassmeister gist.