Override/Customize Bootstrap 4 中的混入

Question

我正在尝试在 Bootstrap 中自定义徽章 class 4. 我想要实现的是显示所有带有轮廓的徽章（类似于 .btn-outline-*）。现在，我（天真地）试图通过 "overriding" 在单独的样式表中混合来做到这一点，如下所示：

@mixin badge-variant($bg) {
  //color: color-yiq($bg); #original
  color: $bg;
  background-color: transparent;
  border: 1px solid $bg;

  &[href] {
    @include hover-focus {
      //background-color: darken($bg, 10%); #original
      background-color: $bg;
    }
  }
}

@import "node_modules/bootstrap/scss/bootstrap";

为什么这不起作用？我可以做些什么来自定义 mixin（不编辑原始文件）？谢谢！

Answer 1

像这样重写 .badge class 并得到 border.

怎么样？

CSS

.badge {
      border: 2px solid #ff0000
 }

包含徽章的示例 HTML，

<div class="container mt-4">
        <div class="row">
          <div class="col-12">
            <h1>Example heading <span class="badge badge-secondary">New</span></h1>
      <h2>Example heading <span class="badge badge-secondary">New</span></h2>
      <h3>Example heading <span class="badge badge-secondary">New</span></h3>
      <h4>Example heading <span class="badge badge-secondary">New</span></h4>
      <h5>Example heading <span class="badge badge-secondary">New</span></h5>
      <h6>Example heading <span class="badge badge-secondary">New</span></h6>
          </div>
        </div>
  </div>

一个例子，

https://codepen.io/anjanasilva/pen/MPmxJd

希望对您有所帮助。干杯。

Answer 2

它应该可以工作，但请记住您必须先 @import bootstrap 然后生成 badge-* 类...

@import "bootstrap";

@mixin badge-variant($bg) {
  color: $bg;
  background-color: transparent;
  border: 1px solid $bg;

  &[href] {
    @include hover-focus {
      background-color: $bg;
    }
  }
}

@each $color, $value in $theme-colors {
  .badge-#{$color} {
    @include badge-variant($value);
  }
}

演示：https://www.codeply.com/go/Iq1RJ96AmW

Override/Customize Bootstrap 4 中的混入

Override/Customize mixins in Boostrap 4

css

sass

less

twitter-bootstrap

bootstrap-4