Skip to main
Article

Map-Set vs. Map-Merge

The difference between map-set and map-merge? Almost nothing.

When I first heard that Sass 3.3 had no map-set function, I was confused. Why force me to create a map, and then merge it? That sounds like two steps to accomplish one simple task! But that’s not the case. Map-merge is a much more powerful function, and using it to set a key in an existing map is quite straight-forward. In fact, I couldn’t come up with a map-set function that shaved off more than a few keystrokes. Here’s the comparison:

// a map!
$map: (
  1: hello,
  2: world,
);

// a map-set function (not included with Sass)
@function map-set($map, $key, $value) {
  $new: (
    $key: $value,
  );
  @return map-merge($map, $new);
}

// the difference between map-set and map-merge: almost nothing.
$merge: map-merge(
  $map,
  (
    2: New York,
  )
);
$set: map-set($map, 2, New York);

Recent Articles

  1. Gray box with dashed lines across the corners and handwritten label hero image
    Article post type

    Make it ugly, for clients

    It’s important to focus the conversation

    Beautiful design mockups can be distracting, giving a false sense of what is complete and what still needs to be done. At OddBird, we find it helpful to remove any ‘premature sheen’ before sharing mockups with clients.

    see all Article posts
  2. A hand holding a coffee mug. Coffee is pouring into the mug and overflowing.
    Article post type

    Anchor Positioning Updates for Fall 2025

    Overflowing content, browser support, and polyfill updates

    Anchor positioning is close to Baseline. As more people try it out, they are finding areas where it could be improved, and differences between browsers. Let’s take a look at the current state of anchor positioning.

    see all Article posts
  3. A measuring tape with both imperial and metric, then a ruler with only metric, and another ruler with combined units
    Article post type

    The Best CSS Unit Might Be a Combination

    We don’t have to choose between px and rem for spacing

    There are many articles and established CSS best-practices that rely on determining the correct or best units to use. Now that comparison functions are well supported in CSS, we don’t have to choose.

    see all Article posts