如何使用 sass 在 Bootstrap 4 中创建一组新的颜色样式 [英] How to create new set of color styles in Bootstrap 4 with sass

问题描述

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

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

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

$brand-crisp: #color !default;

但是，然后呢?谢谢！我感谢您的帮助.

解决方案

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

.btn-custom {@include button-variant(#cece19, #222222, #cece19);}.btn-自定义大纲{@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

按钮 mixins 略有变化，现在需要 add'l params...

.btn-custom {@include button-variant(#cece19, #222222, #cece19, #cece19, #cece19, #cece19);}.btn-自定义大纲{@include button-outline-variant(#222222, #cece19, #222222, #cece19);}@import "引导程序";

I'm starting to navigate through the wonderful Bootstrap 4 and I'm wondering how to add a whole new set of elements color to the _custom.scss

Example: Right now you have btn-danger, text-danger etc... how to create for example, using a random name: "crisp" set... so you will have btn-crisp, text-crisp etc...

My guess would be to start with adding a variable

$brand-crisp: #color !default;

But, then what? Thanks! I appreciate your help.

解决方案

There is not an all inclusive color mixin, so I think you need to use the mixins individually...

.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

---

Update: In Bootstrap 4, you now can create a new custom "theme-color" to as explained in my answer here. This will allow you to use the color anywhere such as btn-custom, text-custom, bg-custom, etc...

Update Bootstrap 4.1

The button mixins have changed slightly and now require add'l params...

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

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

@import "bootstrap";

这篇关于如何使用 sass 在 Bootstrap 4 中创建一组新的颜色样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！