如何使用 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));
}