Bootstrap 4中的覆盖/自定义混合答案

【问题标题】：Override/Customize mixins in Boostrap 4Bootstrap 4中的覆盖/自定义混合
【发布时间】：2019-03-16 05:35:56
【问题描述】：

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

@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（不编辑原始文件）？谢谢！

【问题讨论】：

标签： twitter-bootstrap css sass bootstrap-4 less

【解决方案1】：

像这样覆盖.badge 类并拥有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

我希望这会有所帮助。干杯。

【讨论】：

感谢您的回答。但是，我的问题是关于 mixin 以及如何/是否可以编辑它（不接触原始文件）。你对此有什么想法吗？
我有点不确定你所说的混合是什么意思。上面的例子没有触及原始文件。它使用bootstrap4 提供的现有类并自定义我们想要的方式。如上例，我通过覆盖.badge 类添加了边框。
本质上，我希望能够在编辑时使用变量，例如徽章。因此，我认为覆盖 mixin 是有意义的。您的解决方案将要求我覆盖所有徽章类：badge-primary、badge-secondary、badge-primary:hover 等，如果可能的话，我想避免这种情况
不，您不必覆盖所有 badge-* 类。您需要覆盖的只是 .badge 类。不要忘记所有的徽章类，如 badge-primary, badge-secondary 等，都会有 .badge 类。例如，如果你想使用badge-primary，它将是badge badge-primary。但是，如果您想对badge-primary 有特定要求，对badge-secondary 有特定要求等等，那么您将不得不单独覆盖它们。我跟你说清楚了吗？
@AnjanaSilva - 我认为 OP 想要使用 SASS 混合，而不是 CSS 覆盖。

【解决方案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

【讨论】：

我刚得到他要的东西。感谢您的专业提示 Zim。算我一个赞成票:)
成功了，非常感谢！ @Anjana - 也谢谢你，很抱歉造成混乱:)