twitter-bootstrap – 如何在Bootstrap 4和Sass中设置自定义按钮

发布时间：2020-12-17 21:34:54 所属栏目：安全来源：网络整理

导读：我想在Bootstrap 4中创建一个带有白色(#fff)文本颜色的新按钮样式. Mixin按钮变量根据背景颜色自动设置文本颜色.如何在不修改_buttons.scss的情况下使用此mixin并同时设置颜色？ custom.scss .my_button { @include button-variant(HOW TO SET TEXT COLOR TO

我想在Bootstrap 4中创建一个带有白色(#fff)文本颜色的新按钮样式. Mixin按钮变量根据背景颜色自动设置文本颜色.如何在不修改_buttons.scss的情况下使用此mixin并同时设置颜色？

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,$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;
  }

解决方法

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

您需要使用@include作为自定义按钮,设置颜色：,并传入适当的mixin参数…

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

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