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. OddContrast displays P3 gamut range in Oklch color format
    Article post type

    Make the Web a More a Colorful Place!

    A guide to using new color spaces & formats with OddContrast

    OddBird’s color tool not only checks contrast ratios, but supports the new CSS color formats and spaces.

    see all Article posts
  2. see all Article posts
  3. OddContrast displays sRGB gamut range in P3 color format and an estimate of foreground alpha value ratio.
    Article post type

    New Features for OddContrast

    Display color gamut ranges and more

    OddContrast, OddBird’s color format converter and contrast checker, gets new features – including the ability to swap background and foreground colors, and display color gamut ranges on the color sliders. Contrast ratios now incorporate foreground color alpha values.

    see all Article posts