使用For循环生成SCSS Spacers映射表时遇到错误的求助

你好，我来帮你分析下这个问题：

你想要生成这样的SCSS间距映射表：

$spacers: (
   0: 0,
   1: 4px,
   2: 8px,
   ...
);

你当前的代码是这样的：

$spacer: 4px;

$spacers: ();

@function map-set($map, $key, $value) {
  $new: ($key: $value);
  @return map-merge($map, $new);
}

@for $i from -5 through 12 {
  map-set($spacers, $i, $i * $spacer);
}

但运行后出现了错误，核心原因是SCSS中的变量是不可变的——你的map-set函数确实能生成包含新键值对的新映射，但你在循环里只是调用了这个函数，却没有把返回的新映射重新赋值给$spacers变量。这就导致原来的$spacers始终是空的，同时这种“只调用函数不处理返回值”的写法也不符合SCSS的语法规则，最终引发了报错。

解决方案 #

我们只需要在循环中把每次生成的新映射重新赋值给$spacers即可，这里给你两种可行的写法：

方案一：使用SCSS内置的map.set()函数

SCSS本身已经提供了用于添加/修改映射键值对的内置函数，不用自己实现：

$spacer: 4px;
$spacers: ();

@for $i from -5 through 12 {
  $spacers: map.set($spacers, $i, $i * $spacer);
}

方案二：保留你自己的map-set函数，修改循环逻辑

如果你更习惯用自己写的函数，只需要调整循环里的代码，把函数返回的新映射赋值回$spacers：

$spacer: 4px;
$spacers: ();

@function map-set($map, $key, $value) {
  $new: ($key: $value);
  @return map-merge($map, $new);
}

@for $i from -5 through 12 {
  $spacers: map-set($spacers, $i, $i * $spacer);
}

这样修改后，每次循环都会将新的键值对合并到$spacers中，最终就能生成你需要的间距映射表了。

备注：内容来源于stack exchange，提问作者Magor Menessy