如何在 Bootstrap 4 和 Sass 中设置自定义按钮文本颜色? [英] How to set custom button text color in Bootstrap 4 and Sass?
本文介绍了如何在 Bootstrap 4 和 Sass 中设置自定义按钮文本颜色?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在 Bootstrap 4 中创建一个带有白色 (#fff) 文本颜色的新按钮样式.Mixin button-variant
根据背景颜色自动设置文本颜色.如何在不修改_buttons.scss
的情况下,同时使用这个mixin并设置颜色?
I would like to create a new button style in Bootstrap 4 with a white (#fff) text color. Mixin button-variant
automatically sets the text color based on the background color. How can I use this mixin and set the color at the same time, without modifying _buttons.scss
?
custom.scss
.my_button {
@include button-variant(HOW TO SET TEXT COLOR TO WHITE?);
}
_buttons.scss
@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
color: color-yiq($background);
@include gradient-bg($background);
border-color: $border;
@include box-shadow($btn-box-shadow);
@include hover {
color: color-yiq($hover-background);
@include gradient-bg($hover-background);
border-color: $hover-border;
}
推荐答案
这类似于:如何使用 sass 在 Bootstrap 4 中创建一组新的颜色样式
自定义按钮需要使用@include,设置color:
,并传入合适的mixin参数...
You need to use @include for the custom button, set the color:
, and pass in the appropriate mixin params...
.btn-custom {
@include button-variant(pink, red, red, #444, #333, red);
color: #fff;
}
https://www.codeply.com/go/EHwnjvUXac
这篇关于如何在 Bootstrap 4 和 Sass 中设置自定义按钮文本颜色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文