Sass error : function does not return a correct map

Question

我正在尝试制作一个 scss 函数来制作 material 调色板。

这个函数应该 return 一个映射但是当我调试时，我得到了这个 :

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

这是我的代码：

$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;
}

有人可以帮我解决这个错误，我的 IDE 没有显示任何东西吗？

Answer 1

你有点搞混了。在 Sass 中，函数需要在使用前声明。

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

Sass error : function does not return a correct map

Sass error : function does not return a correct map

sass

sass-maps