如何使用sass在Bootstrap 4中创建一组新的颜色样式 [英] How to create new set of color styles in Bootstrap 4 with sass
问题描述
我开始浏览精彩的Bootstrap 4,我想知道如何向_custom.scss
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
示例:现在您有btn-danger,text-danger等...如何使用随机名称创建示例:"crisp"设置...因此您将拥有btn-crisp,text-crisp等...
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
更新: :在Bootstrap 4中,您现在可以创建新的自定义主题颜色",如我的回答在这里.这将使您可以在任何地方使用颜色,例如btn-custom
,text-custom
,bg-custom
等...
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...
更新Bootstrap 4.1
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屋!