Sass - 语法错误：SassError：预期的“{”

Question

sass map.set文档给出的示例不起作用，这是为什么呢？

@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

我希望设置 map 不会引发错误。

Answer 1

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

实际上，我一直在使用map-set ，我认为map-set与map.set相同，结果并非如此。

在 Sass 的文档内置模块中：

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

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

问题 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. 在 Sass 中，我必须这样做：

@use "sass:map";

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

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

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

Answer 2

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

解决方案

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

解释

map.set实际上返回一个带有更新值的新 map并且它没有分配给变量，所以下面的代码会抛出错误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语法，因此情况将与您将编写以下代码相同：

@using 'sass:map';

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

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