SASS - 通过 map_merge 传递地图会产生相似但不等效的地图

Question

我正在尝试编写一个函数，以动态地将一些转换应用于先前定义的颜色映射，以用于角度材质主题。问题是函数的结果是错误的，不知何故。

我已经通过调试日志打印了结果，它看起来与原始地图一模一样，但无法通过键进行比较，如果我尝试将其提供给角度材质函数，则会导致错误。

这是问题的简化演示 - 你可以看到

• $eenie 和 $meenie 是等价的
• 函数的结果（$miney 和$mo）也是等价的
• 所有 4 个通过调试看起来都一样

我需要在函数内部完成的是$eenie在经过map_merge之后等于$miney

我怀疑可能是因为密钥看起来是一个数字，所以它存在某种数据类型危机，但我对 SASS 的了解还不够，无法确定是否是这种情况或如何解决它。我尝试过使用引号，但这似乎不是角度材料函数的可接受输入，因此我需要它与 $eenie 完全匹配。

@function merge-things($base-palette){
  $result: ();
  @each $hue, $color in $base-palette {
      $result: map_merge($result, (#{$hue}: $color));
  }
  @return $result;
}

$eenie: (
  50: green,
  contrast: (
    50: white,
  ),
);
$meenie: (
  50: green,
  contrast: (
    50: white,
  ),
);

$miney: merge-things($eenie);
$mo: merge-things($miney);



@debug $eenie;    // DEBUG: (50: green, contrast: (50: white))
@debug $meenie;   // DEBUG: (50: green, contrast: (50: white))
@debug $miney;    // DEBUG: (50: green, contrast: (50: white))
@debug $mo;       // DEBUG: (50: green, contrast: (50: white))
@debug 'eenie-meenie #{map-keys($eenie) == map-keys($meenie)}';   // DEBUG: eenie-meenie true
@debug 'eenie-miney #{map-keys($eenie) == map-keys($miney)}';     // DEBUG: eenie-miney false
@debug 'miney-mo #{map-keys($miney) == map-keys($mo)}';           // DEBUG: miney-mo true

Answer 1

merge-things 函数在使用映射中的数字键执行插值时更改键的类型。

@use "sass:map";

$result: map-merge($result, (#{$hue}: $color));

以下练习表明，插入 number 类型会将其转换为 string 类型。

@use "sass:meta";

$k: 1;

@debug meta.type-of(#{$k}); // string

@debug meta.type-of($k); // number

在构建新地图时保持原样。

-      $result: map-merge($result, (#{$hue}: $color));
+      $result: map-merge($result, ($hue: $color));