如何使用 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 and there，虽然不是很多。

更新：

我越来越近了...将上面的 SCSS 代码替换为：

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

可以解决问题，但这里我明确将颜色设置为红色。我想让它动态，所以在这里使用给定按钮的颜色。

更新二：

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

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

How to use Bootstrap's bg-variant modifier