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

Question

我开始浏览精彩的 Bootstrap 4，我想知道如何将一组全新的元素颜色添加到 _custom.scss

示例：现在您有 btn-danger、text-danger 等...如何创建例如，使用随机名称：“crisp”集...所以您将拥有 btn-crisp、text-crisp 等...

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

$brand-crisp: #color !default;

但是，然后呢？谢谢！我感谢您的帮助。

Answer 1

没有一个包罗万象的颜色混合，所以我认为你需要单独使用混合...

.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 中，您现在可以按照my answer here 中的说明创建新的自定义“主题颜色”。这将允许您在任何地方使用颜色，例如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";

Answer 2

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

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

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

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

希望这会有所帮助。

Answer 3

我创建完全自定义的颜色，并通过创建 custom.scss 添加颜色，添加新的主题颜色，然后将其编译为 custom.css。下面是更改主题颜色以及添加新颜色（紫色）的示例。请注意，您需要在文件底部导入 bootstrap.scss 才能使其正常工作。这是一个例子：

$theme-colors: (
   "primary": #7189bf,
   "secondary": #667,
   "success": #72d6c9,
   "info": #00aedb,
   "warning": #df7599,
   "danger": #ffc785,
   "purple": #b19cd9,
);

@import '../../bootstrap/scss/bootstrap';

还有其他方法，我只是觉得这对我来说最简单。您可以在 bootstrap 4 中自定义更多内容，也可以在此文件中使用变量等进行自定义。

我创建了一个使用此方法的模板，并使用新的主题颜色显示所有元素的外观。我把我在网上找到的东西放在一起供我使用 - 您可以随意使用它，或者更改它等等。

这是链接：https://github.com/steveshead/bootstrap4-elements-v2