如何使用Bootstrap的bg-variant修饰符

Question

我有一些按钮

<button type="button" class="myButton btn btn-primary">foo</button>
<button type="button" class="myButton btn btn-secondary">bar</button>
...

对于背景色，我想提供一些透明度。我正在尝试：

button.myButton {
  @include bg-variant(<???>, rgba(<button's color?>, 0.7));
}

有一些信息here和there，尽管信息不多。

更新：

我越来越近了……通过以下方式替换上面的SCSS代码：

@include bg-variant('button.myButton', rgba($red, 0.7));

可以解决问题，但是在这里我将颜色显式设置为红色。我想使其动态化，因此请在此处使用给定按钮的颜色。

更新2：

我以为我终于找到了，但这是

@each $color, $value in $theme-colors {
  @include bg-variant('button.myButton', rgba($value, 0.7));
}

使按钮的背景变为灰色。为什么？

Answer 1

解决了。

@each $color, $value in $theme-colors {
  @include bg-variant('button.myButton.btn-#{$color}", rgba($value, 0.7));
}