Auto generated sass maps

[AlessioRipa]

Hi Hugo! I'm trying to generate an automated system to define colors in SASS.

I have a map of colors named $brand-colors, and I would like the colors of this map to be used to generate the tints and shades in a second map, no matter how many colors there are in $ brand-colors.

This is the point where I arrived:

$brand-colors: (
  brand-color: (
    primary-color:        #0096d6,
    secondary-color:      #1a4760,
  ),
) !default;

@function generate-map($map) {
  @each $item, $colors in $map {
    @each $color-name, $value in $colors {
      @return(
        $color-name: (
          light-30:   mix(white, $value, 30%),
          light-20:   mix(white, $value, 20%),
          light-10:   mix(white, $value, 10%),
          base:       $value,
          dark-10:    mix(black, $value, 10%),
          dark-20:    mix(black, $value, 20%),
          dark-30:    mix(black, $value, 30%),
        ),
      );
    };
  };
};

$brand-palette: (
  brand-palette:(
    generate-map($_new-brand-colors)
  ),
) !default;

With the above code, I get this result from the terminal:

$brand-palette: (
  primary-color:(
    light-30: #4db6e2,
    light-20: #33abde,
    light-10: #1aa1da,
    base: #0096d6,
    dark-10: #0087c1,
    dark-20: #0078ab,
    dark-30: #006996
  )
)

In short, only the first key-value pair is taken, and I can not understand why.

[KittyGiraudel]

Hey there!

You are looping correctly over your data, but you are returning inside the loop. Right now, you start looping and during the first iteration, you return, therefore closing the function scope.

Does it make sense? :)

[AlessioRipa]

Hi Hugo, thanks for the advise! With this new function, everything goes as it should!

@function generate-map($map) {
  $tmp-map:();
  @each $item, $colors in $map {
    @each $color-name, $value in $colors {
        $tmp-map:map-merge($tmp-map, ($color-name: (
          light-30:   mix(white, $value, 30%),
          light-20:   mix(white, $value, 20%),
          light-10:   mix(white, $value, 10%),
          base:       $value,
          dark-10:    mix(black, $value, 10%),
          dark-20:    mix(black, $value, 20%),
          dark-30:    mix(black, $value, 30%),
        )));
      };
    };
  @return($tmp-map);
};

[KittyGiraudel]

Lovely! :)