如何映射(转换)一个映射到一个修改了键和值的新映射

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%)
));
}