Why do I get a Syntax Error: SassError: expected "{"?

Question

The example given by the sass map.set documentation doesn't work, why is that?

@use "sass:map";

$font-weights: (
  'regular': 400,
  'medium': 500,
  'bold': 700
);

map.set($font-weights, 'extra-bold', 900);
// ("regular": 400, "medium": 500, "bold": 700, "extra-bold": 900)
map.set($font-weights, 'bold', 900);
// ("regular": 400, "medium": 500, "bold": 900)

My sass version is 1.32.5.
The entire error message:

Syntax Error: SassError: expected "{".
  ╷
9 │ map.set($font-weights, 'extra-bold', 900);
  │                                          ^
  ╵
  src\assets\styles\variables.scss 9:42  @import
  src\assets\styles\main.scss 4:9        root stylesheet

I expect the map to be set without throwing errors.

Likewise

Answer 1

Problem 1 (If you are using map.set, please skip to problem 2)

Actually, I was using map-set the whole time, I thought map-set is the same as map.set, turned out it's not.

In Sass's doc Built-In Modules:

Before the Sass module system was introduced, all Sass functions were globally available at all times. Many functions still have global aliases (these are listed in their documentation). The Sass team discourages their use and will eventually deprecate them, but for now, they remain available for compatibility with older Sass versions and with LibSass (which doesn’t support the module system yet).

And map.set doesn't have a global map-set like map.merge does (map-merge).

Problem 2

Also, I thought map.set would act like JavaScript's Map.prototype.set(), by which you set a map like map.set(key, value) without assigning it to a variable will work. In Sass, I had to do:

@use "sass:map";

$map: ();
$map: map.set($map, key, value);

Why @debug "didn't work" for me

Mostly I'm using Sass under the vue-cli environment. Sass's @debug syntax "never had" any output visually, it turned out they're actually outputted, I just have to scroll up a bit:

Likewise

Answer 2

If an error in your code is still occurring, you might do the same stupid mistake as I did.

Solution

Just assign the return value to some variable.

Explanation

map.set actually returns a new map with updated values and it is not assigned to a variable, so the following code will throw the error SassError: expected "{".:

@using 'sass:map';

$test: (
  foo: 23,
  bar: ()
);

map.set($test, bar, baz, 5);

... because on line 8 (map.set($test, bar, baz, 5);) set function will return new map ((foo: 23, bar: (baz: 5))) and it is not valid sass syntax, so the situation will be the same as you will write the following code:

@using 'sass:map';

$test: (
  foo: 23,
  bar: ()
);

(foo: 23, bar: (baz: 5));

Augustinaaugustine