如何使用sass在Bootstrap 4中创建一组新的颜色样式

Question

我开始浏览精彩的Bootstrap 4，并且想知道如何为_custom.scss添加全新的元素颜色集

示例：现在您有btn-danger，text-danger等...如何使用随机名称创建示例：“ crisp”设置...因此您将拥有btn-crisp，text-crisp等...

我的猜测是从添加变量开始

$brand-crisp: #color !default;

但是，那又怎样呢？谢谢！我感谢您的帮助。

Answer 1

你很幸运，因为今天我刚刚发布了一个完全可以做到这一点的在线工具：https : //lingtalfi.com/bootstrap4-color-generator。

它将生成必要的 css 代码（使用或不使用 sass 作为选项），并将为 bootstrap4 颜色生成 10 种颜色变化。

最后，我建议创建一个自定义的“my_colors.css”（或 my_colors.scss）文件，并将所有生成的颜色放入其中。

请注意，我的工具只更改颜色，它不关心其他属性（填充、字体大小等）。

希望这可以帮助。

Answer 2

没有全包的颜色混合器，因此我认为您需要单独使用混合器...

.btn-custom {
    @include button-variant(#cece19, #222222, #cece19);
}

.btn-custom-outline {
    @include button-outline-variant(#222222);
}

.card-custom {
    @include card-variant(#aa9999, #997777)
}

http://www.codeply.com/go/MKGQCrLwDs

更新：在Bootstrap 4中，您现在可以创建一个新的自定义“主题颜色”，如我在此处的答案所述。这将允许你使用的颜色在任何地方，如btn-custom，text-custom，bg-custom，等...

更新Bootstrap 4.1

按钮混合已略有变化，现在需要添加参数...

.btn-custom {
    @include button-variant(#cece19, #222222, #cece19, #cece19, #cece19, #cece19);
}

.btn-custom-outline {
    @include button-outline-variant(#222222, #cece19, #222222, #cece19);
}

@import "bootstrap";