Search code examples
angularsassscss-mixins

SCSS syntax for list and map

I'm trying to run the following code in Angular v16.

@use "sass:map";
@use "sass:list";

list.append(10px 20px, 30px); // ERROR expectedscss(css-lcurlyexpected)
@debug list.append(10px 20px, 30px);

$font-weights: ("regular": 400, "medium": 500, "bold": 700);
map.set($font-weights, "regular", 300); // ERROR expectedscss(css-lcurlyexpected)
@debug map.set($font-weights, "regular", 300);

When I'm using list.append() and map.set() I receive the above errors. However, if I use @debug then it works. I'm missing something?

The error // ERROR expectedscss(css-lcurlyexpected) I receive it both in my editor, VSCode and in the terminal.

Also, copying this code into a new .scss file in VSCode will show the same error.

Solution

  • You get this error because list.append() and map.set() both return a copy of the given list/map, and so expect to be assigned to a variable (when not used in @debug). The documentation seems a bit misleading on this, as I haven't found any mention of it and the examples don't use assignments.

    @use "sass:map";
@use "sass:list";

$newList: list.append(10px 20px, 30px);

$font-weights: ("regular": 400, "medium": 500, "bold": 700);
$newMap: map.set($font-weights, "regular", 300);