为何使用sass1.32.5运行官方map.set示例会抛出expected "{"语法错误

报错的核心来源 #

• 版本适配问题：map.set是Sass 1.41.0版本才正式加入的内置方法，当前使用的1.32.5版本早于该功能的上线时间，本身不支持对该方法的语法解析。
• 语法使用逻辑错误：Sass的所有map操作都是纯函数，不会原地修改传入的原map变量，只会返回一个经过修改的全新map。你现在直接把map.set()作为独立语句写在scss文件顶层，Sass会将其解析为要输出到CSS的选择器规则，自然会抛出「expected "{"」的语法错误。

对应解决方法 #

• 若可升级依赖：将Sass版本升级到1.41.0及以上，同时调整调用方式——必须把map.set的返回值重新赋值给变量，不能单独书写调用语句，正确示例：

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

• 若暂时无法升级依赖：可以用低版本全量支持的map.merge方法实现完全一致的新增、覆盖map键值的效果，写法示例：

  @use "sass:map";
  
  $font-weights: (
    'regular': 400,
    'medium': 500,
    'bold': 700
  );
  
  $font-weights: map.merge($font-weights, ('extra-bold': 900));
  $font-weights: map.merge($font-weights, ('bold': 900));
  

内容的提问来源于stack exchange，提问作者Wenfang Du