“Not a map for `map-get`” error after adding new elements to a mapping

Question

How can I merge a mapping into an existing mapping in sass?

I am currently using sass maps in a _config partial to define my breakpoints, for example:

Answer 1

The function you're looking for is map-merge(), not join(). The join() function is for joining lists together and is causing your mapping to get converted to a list of lists.

$fix-mqs: false;
$breakpoints: (
    small: 35rem,
    medium: 55rem,
    large: 75rem,
    xlarge: 90rem
);

// map-merge here, not join
$breakpoints: map-merge($breakpoints, (element-breakpoint-1: 100rem, element-breakpoint-2: 110rem));

@mixin breakpoint($width) {
    @if $fix-mqs {
        @if $fix-mqs >= map-get($breakpoints, $width) {
            @content;
        }
    }
    @else {
        @media screen and (min-width: map-get($breakpoints, $width)) {
            @content;
        }
    }
}

@include breakpoint(element-breakpoint-2) {
  .foo {
    color: red;
  }
}

Output:

@media screen and (min-width: 110rem) {
  .foo {
    color: red;
  }
}