sasssass-maps

Sass error : function does not return a correct map


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 ?


Solution

  • 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");
    }