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

Question

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

@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

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

解决方案

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

解释

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 函数会返回 new map ( (foo: 23, bar: (baz: 5))) 并且它不是有效的 sass 语法，所以情况将与您将编写以下代码相同：

@using 'sass:map';

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

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

Answer 2

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

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

在 Sass 的文档内置模块中：

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

并且map.set没有全局的map-setlike map.mergedoes ( 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语法在视觉上“从来没有”任何输出，结果它们实际上是输出的，我只需要向上滚动一点：