Sass error : function does not return a correct map

Question

I′m trying to make a scss function to make a material colors palette.

This function should return a map but when I debug, I got this :

SassError: $map: gen-palette(green) is not a map.

This is my code :

$highlight-color: green;

$highlight-palette: gen-palette( $highlight-color );

@debug map-get( $highlight-palette, '50' );

@function gen-palette( $color ) {
  $map: (
    '50': lighten( $color, 52% ),
    '100': lighten( $color, 37% ),
    '200': lighten( $color, 26% ),
    '300': lighten( $color, 12% ),
    '400': lighten( $color, 6% ),
    '500': $color,
    '600': darken( $color, 6% ),
    '700': darken( $color, 12% ),
    '800': darken( $color, 18% ),
    '900': darken( $color, 24% ),
    'A100': lighten( saturate( $color, 30% ), 50% ),
    'A200': lighten( saturate( $color, 30% ), 30% ),
    'A400': lighten( saturate( $color, 15% ), 10% ),
    'A700': lighten( saturate( $color, 5% ), 5% ),
  );
  @return $map;
}

Someone can help me to fix this error, my IDE does not show anything ?

Answer 1

You mixed things up a little. In Sass functions need to be declared before coming to use.

@function gen-palette($color) {
  @return (
    "50": lighten($color, 52%),
    "100": lighten($color, 37%),
    "200": lighten($color, 26%),
    "300": lighten($color, 12%),
    "400": lighten($color, 6%),
    "500": $color,
    "600": darken($color, 6%),
    "700": darken($color, 12%),
    "800": darken($color, 18%),
    "900": darken($color, 24%),
    "A100": lighten(saturate($color, 30%), 50%),
    "A200": lighten(saturate($color, 30%), 30%),
    "A400": lighten(saturate($color, 15%), 10%),
    "A700": lighten(saturate($color, 5%), 5%),
  ); 
}

body {
  background-color: map-get(gen-palette(#2196f3), "500");
}