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. Miriam gesturing as she talks in a video thumbnail
    Article post type

    Visualizing Responsive Typography

    What do all the numbers in our clamp() do?

    There are multiple tools that can help create a fluid font-size calculation for CSS – generally expressed as a clamp() function combining em (or rem) with vw (or vi) units. But the results are difficult to understand at a glance, so I wanted to visualize what’s going on…

    see all Article posts
  2. Close-up of keys on an old Spanish typewriter, part of the space bar, a, s, d, z, x, and MAYÚSCULAS (capslock) with release above it
    Article post type

    Designing for User Font-size and Zoom

    Using modern CSS units and math functions

    When I tried setting my browser font-size preferences, I found it broke more sites than it improved, and I quickly moved back to the default. So what went wrong, and how can we fix it?

    see all Article posts
  3. OddContrast displays P3 gamut range in Oklch color format
    Article post type

    Make the Web a More 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