Sass - map.set 抛出 SassError：预期为“{” 解决方案说明

问题描述

sass map.set documentation 给出的例子不起作用，为什么？

@use "sass:map";

$font-weights: (
  'regular': 400,'medium': 500,'bold': 700,);

@debug map.set($font-weights,'extra-bold',900);
// ("regular": 400,"medium": 500,"bold": 700,"extra-bold": 900)
@debug map.set($font-weights,'bold',"bold": 900)

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

Syntax Error: SassError: expected "{".
  ╷
9 │ map.set($font-weights,900);
  │                                          ^
  ╵
  src\assets\styles\variables.scss 9:42  @import
  src\assets\styles\main.scss 4:9        root stylesheet

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

解决方法

多亏了 Simplicius 的指导，我终于弄明白了。

---

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

在 Sass 的文档 Built-In Modules 中：

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

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

另外，我认为 map.set 会像 JavaScript 的 Map.prototype.set() 一样，通过它设置像 map.set(key,value) 这样的地图而不将其分配给变量会起作用。在 Sass 中，我必须这样做：

@use "sass:map";

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

奖金
大多数情况下，我在 vue-cli 环境下使用 Sass。 Sass 的 @debug,@warn 语法在视觉上“从来没有”任何输出，结果它们实际上输出，我只需要向上滚动一点XD，一个 Gif证明了我的意思：

根据Simplicius的建议，我这次尝试了@error，相比之下，@error的输出真的很突出，我不需要滚动查看：

,

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

解决方案

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

说明

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

@using 'sass:map';

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

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

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

@using 'sass:map';

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

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