为什么我会收到语法错误：SassError：预期的“{”？答案

【问题标题】：Why do I get a Syntax Error: SassError: expected "{"?为什么我会收到语法错误：SassError：预期的“{”？
【发布时间】：2021-04-30 20:23:41
【问题描述】：

sassmap.set documentation给出的例子不起作用，这是为什么呢？

@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)

我的sass 版本是1.32.5。
整个错误信息：

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

我希望地图的设置不会引发错误。

【问题讨论】：

标签： css sass sass-loader dart-sass sass-maps

【解决方案1】：

如果您的代码中仍然出现错误，您可能会犯和我一样愚蠢的错误。

解决方案

只需将返回值分配给某个变量。

说明

map.set实际上返回了一个更新了值的新地图并且它没有赋值给变量，所以下面的代码会抛出错误SassError: expected "{".：

@using 'sass:map';

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

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

...因为在第8行（map.set($test, bar, baz, 5);）set函数会返回新的map（(foo: 23, bar: (baz: 5))）并且它不是有效的sass语法，所以情况会和你写下面的代码一样：

@using 'sass:map';

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

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

【讨论】：

【解决方案2】：

问题 1（如果您正在使用map.set，请跳至问题 2）

其实我一直在用map-set，我以为map-set和map.set是一样的，结果不是。

在 Sass 的文档中 Built-In Modules:

在引入 Sass 模块系统之前，所有 Sass 功能始终全局可用。 许多函数仍然有全局别名（这些在其文档中列出）。 Sass 团队不鼓励使用它们，并最终会弃用它们，但目前，它们仍可用于与旧 Sass 版本和 LibSass（尚不支持模块系统）兼容。

并且map.set 没有像map.merge 那样的全局map-set (map-merge)。

问题 2

另外，我认为map.set 的行为类似于 JavaScript 的 Map.prototype.set()，通过它您可以设置像 map.set(key, value) 这样的映射而不将其分配给变量。在 Sass 中，我必须这样做：

@use "sass:map";

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

为什么 @debug 对我“不起作用”

我主要在vue-cli 环境下使用Sass。 Sass 的 @debug 语法在视觉上“从未有过”任何输出，结果发现它们是实际上输出的，我只需要向上滚动一点：

【讨论】：