如何使用 Saas 变量颜色主题混合为背景颜色赋予不透明度？

Question

This is my mixins for themes color

$themes: (
    light: (
    black-color: black,
    ),
    dark: (
        black-color: rgb(235, 13, 161),
    )
);

 @mixin themify($themes) {
    @each $theme, $map in $themes {
      .theme-#{$theme} & {
        $theme-map: () !global;
        @each $key, $submap in $map {
          $value: map-get(map-get($themes, $theme), '#{$key}');
          $theme-map: map-merge($theme-map, ($key: $value)) !global;
        }
        @content;
        $theme-map: null !global;
      }
    }
  }

  @function themed($key) {
    @return map-get($theme-map, $key);
  }

This is my class where i am appending property with variables

.overlay {
     @include themify($themes) {
        background-color: themed(black-color, .5);
        box-shadow: 1px 1px 1px  themed(black-color, .5);
    }
}

But opacity not working and following error getting Sass Error: Only 1 argument allowed, but 2 were passed.

Answer 1

If you don't use the black-color anywhere else you could try redefining them as:

$themes: (
    light: (
    black-color: rgba(0, 0, 0, 0.5),
    ),
    dark: (
        black-color: rgba(235, 13, 161, 0.5),
    )
);