How to give opacity to background-color using Saas variables color themes mixins?

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.

Your function `themed` only takes one parameter while you send two arguments. — Arkellys, Dec 31 '20 at 13:11
@Arkellys Ye, right, but how can I fixe it, I want to give opacity to background color — Nitin Patil, Dec 31 '20 at 13:22

score 0 · Answer 1 · answered Dec 31 '20 at 15:09

0

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),
    )
);

answered Dec 31 '20 at 15:09

A Haworth

30,908
4
11
14

How to give opacity to background-color using Saas variables color themes mixins?

1 Answers1