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);
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.
It’s time to stop spreading this out-dated practice
Setting the box-sizing model to border-box is one of the few remaining CSS ‘resets’ used across most projects. But there are two common approaches, and the more popular choice will cause more problems than it solves.
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…