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

问题描述

这是我的主题颜色混合

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

这是我用变量附加属性的类

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

但是不透明度不起作用并且出现以下错误 Sass 错误：只允许 1 个参数，但传递了 2 个。

解决方法

如果您不在其他任何地方使用黑色，您可以尝试将它们重新定义为：

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