sass - 使用 scss 覆盖 bootstrap 4 主按钮样式

Question

我是使用 SASS 的新手，我发现了很多关于如何更改主按钮颜色的帖子，这很容易，但我也想更改边框和悬停。我能想到的唯一方法是添加一个我称之为“基本”的额外类。这是我的代码：

SCSS

$btn-bg: $bright-pink;    

@mixin button-variant($color, $background, $border) {
color: #fff;
background-color: $btn-bg;
border: 3px solid $btn-bg;

&:hover {
    color: $btn-bg;
    background-color: $transparent;
    border: 3px solid $btn-bg;
  }
}

.btn-primary.basic { @include button-variant
  (#fff,
  $btn-basic,
  3px solid $btn-bg); 
}

HTML

 <button type="button" class="btn btn-primary basic">Primary text</button>

有没有更好的方法来做到这一点？我可以在不添加额外类的情况下覆盖主按钮吗？

标签： sassbootstrap-4scss-mixins

Answer 1

要创建按钮的新变体，请使用以下 SASS。

然后在元素上使用“btn-primary basic” ass 类。

$btn-background: #39a4d2;
$btn-border: #56a1c5;
$btn-color: #fff;

@mixin button-variant($background, $border, $color) {
    background-color: $btn-background;
    border: 2px solid $btn-border;
    color: #fff;

    &:hover {
        border: 2px solid $btn-background;
        color: $btn-color;
    }
}

.btn-primary {
    &.basic {
        @include button-variant($btn-background, $btn-border, $btn-color);
    }
}