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

Question

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

我希望地图设置不会出现错误。

Answer 1

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

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

在 Sass 的文档中 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).

而 map.set doesn't have a global map-set like map.merge 是 (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 语法在视觉上“从未有过”任何输出，事实证明它们是 实际上 输出的，我只需要向上滚动一点：

Answer 2

如果您的代码中仍然存在错误，您可能会犯与我相同的愚蠢错误。

解决方案

只需将 return 值分配给某个变量即可。

说明

map.set 实际上 return 是一个具有更新值的新地图 并且它没有分配给变量 ，所以下面的代码将抛出错误 SassError: expected "{".:

@using 'sass:map';

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

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

... 因为在第 8 行 (map.set($test, bar, baz, 5);) set 函数将 return 新地图 ((foo: 23, bar: (baz: 5))) 并且它是无效的 sass 语法，所以情况将与您编写以下代码相同：

@using 'sass:map';

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

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

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

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

css

sass

sass-loader

sass-maps

dart-sass

解决方案

说明