如何将地图映射（转换）为具有修改的键和值的新地图

Question

给定以下地图：

$colors: (
  "primary": "#0d6efd",
  "secondary": "#6c757d",
   ...
)

如何创建新地图，其中键为 #{$key}-light，值为 ligthen($value, 20%) 的结果：

预期结果：

$colors-light: (
  "primary-light": ...,
  "secondary-light": ...
)

在 javascript 中是这样的：

const colors-light = new Map(
  [...colors.entries()].map(i => [
     `${i[0]}-light`, //key
      lighten(i[1], 0.2) //value
  ])
);

在 C# 中它将是：

colors.ToDictionary(
   item => $"{item.Key}-light", 
   item => Lighten(item.Value, 0.2)
);

Answer 1

与 @each loop and map-merge:

$colors: (
  "primary": "#0d6efd",
  "secondary": "#6c757d",
  ...
);

$color-light: ();

@each $colorName, $colorValue in $colors {
    $color-light: map-merge($color-light, (
        #{$colorName}-light: ligthen($colorValue, 20%)
    ));
}

Answer 2

不幸的是，没有循环是没有办法做到的：

$color-light: ();

@each $colorName, $colorValue in $colors {
    $color-light: map.set($color-light, #{$colorName}-light, ligthen($colorValue, 20%));
}

如何将地图映射（转换）为具有修改的键和值的新地图

How to map (transform) a map to a new map with modified keys and values

sass

dart-sass