twitter-bootstrap - Bootstrap 4 中的覆盖/自定义混合

Question

我正在尝试自定义 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";

为什么这不起作用？我可以做些什么来自定义混合(不编辑原始文件)？谢谢!

Answer 1

它应该可以工作，但请记住您必须先@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