Angular 16中SCSS的list.append与map.set报错问题求助

你的问题核心是：SCSS不允许将纯函数调用作为独立的顶层语句。

list.append()和map.set()这类Sass工具函数的作用是返回一个新值（新列表或新映射），但你直接在顶层调用它们时，既没有把返回值赋值给变量，也没有把它用在CSS属性或其他需要值的场景中。SCSS解析器会把这种无意义的函数调用当成无效的CSS语法，因此抛出expectedscss(css-lcurlyexpected)错误——它以为你在写CSS选择器，期待后面跟上{来定义样式块。

而@debug是Sass的内置调试指令，它的作用就是接收一个值并输出到控制台，所以它可以直接调用函数来获取值，不会触发语法错误。

正确的写法 #

你需要把函数的返回值利用起来，比如赋值给变量，或者直接用在CSS属性里：

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

// 1. 赋值给变量，后续可以复用
$extended-list: list.append(10px 20px, 30px);
$font-weights: ("regular": 400, "medium": 500, "bold": 700);
$updated-font-weights: map.set($font-weights, "regular", 300);

// 2. 直接用在CSS属性中
.example-element {
  margin: list.append(10px 20px, 30px);
}

// 调试时依然可以用@debug
@debug $extended-list;
@debug $updated-font-weights;

只要确保函数调用的结果有“去处”，就不会再触发语法错误了。

内容的提问来源于stack exchange，提问作者undefined