13

我想在 Bootstrap 4 中创建一个带有白色（#fff）文本颜色的新按钮样式。Mixinbutton-variant会根据背景颜色自动设置文本颜色。如何在不修改的情况下同时使用这个 mixin 并设置颜色_buttons.scss？

自定义.scss

.my_button {
  @include button-variant(HOW TO SET TEXT COLOR TO WHITE?);
}

_buttons.scss

@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
  color: color-yiq($background);
  @include gradient-bg($background);
  border-color: $border;
  @include box-shadow($btn-box-shadow);

  @include hover {
    color: color-yiq($hover-background);
    @include gradient-bg($hover-background);
    border-color: $hover-border;
  }
4

1 回答 1

17

这类似于：How to create new set of color styles in Bootstrap 4 with sass

您需要为自定义按钮使用@include，设置color:并传入适当的mixin参数...

.btn-custom {
    @include button-variant(pink, red, red, #444, #333, red);
    color: #fff;
}

https://www.codeply.com/go/EHwnjvUXac

相关：扩展 Bootstrap 4 和 SASS

于 2018-05-07T22:58:34.300 回答