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

Question

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

示例：现在您有 btn-danger、text-danger 等...如何创建，例如，使用随机名称："crisp" 设置...所以您将拥有 btn-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 中，您现在可以创建一个新的自定义 "theme-color" 如 my answer here 中所述。这将允许您在任何地方使用颜色，例如 btn-custom、text-custom、bg-custom 等...

更新Bootstrap4.1

按钮 mixins 略有变化，现在需要附加参数...

.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）文件，并将所有生成的颜色放入其中。

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

希望对您有所帮助。

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 中还有很多你可以自定义的，也可以在这个文件中使用变量等来完成。

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

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

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

How to create new set of color styles in Bootstrap 4 with sass

sass

twitter-bootstrap-4

bootstrap-4