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

【问题标题】：How to give opacity to background-color using Saas variables color themes mixins?如何使用 Saas 变量颜色主题混合为背景颜色赋予不透明度？
【发布时间】：2021-04-07 18:46:42
【问题描述】：

这是我的主题颜色混合

$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 个。

【问题讨论】：

你的函数themed在你发送两个参数时只接受一个参数。
@Arkellys Ye，对，但是我该如何解决它，我想给背景颜色赋予不透明度

标签： css bootstrap-4 sass mixins scss-mixins

【解决方案1】：

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

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

【讨论】：