web-dev-qa-db-ja.com

Bootstrap 4とSassでカスタムボタンのテキストの色を設定する方法は？

Bootstrap 4に白（#fff）のテキスト色を使用して新しいボタンスタイルを作成します。Mixinbutton-variantは、背景色に基づいてテキスト色を自動的に設定します。方法このミックスインを使用し、_buttons.scssを変更せずに同時に色を設定しますか？

custom.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;
  }
twitter-bootstrapsassbootstrap-4scss-mixins
7
dunkubok

これは次のようなものです。 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

7
Zim