sassdart-sass

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

Given following map:

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

how do I create new map where key will be #{$key}-light and value e.g result of ligthen($value, 20%):

expected result:

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

in javascript it would be something like:

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

in C# it would be:

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

  • Unfortunatelly, there is no way to do it without a loop:

    $color-light: ();

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