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

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

不幸的是，没有循环就没有办法做到这一点：

$color-light: ();

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

Answer 2

使用@each循环和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%)
    ));
}