SASS

Question

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

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

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

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

我需要在函数内部完成的是 $eenie 在经过 map_merge

之后等同于 $miney

我怀疑可能是因为密钥看起来是一个数字，它存在某种数据类型危机，但我对 SASS 的了解还不够，无法弄清楚是否是这种情况或如何解决它。我试过使用引号，但这似乎不是 angular material 函数可接受的输入，所以我需要它与 $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));

SASS - 通过 map_merge 传递地图会导致看起来相似但不等同的地图

SASS - Passing map through map_merge results in similar looking but not equivalent map

sass-maps

angular-material-theming