How to style bootstrap buttons with sass variables / mixins

I want to style some bootstrap buttons. Button styling can overwritten by basic css but I hate doing it like that with those annoying importants. I want it do it the right way with the theming approach.

_bootstrap-custom.scss

@import 'styleGuide';
// Custom variables (must laoded before the bootsrap css)
$primary: $button-primairy-background;
$secondary: #d2ddf3;
$font-family-base: $font-family-default;
$input-border-color: rgba($color: $color-black, $alpha: 0.15);

$theme-colors: (
"primary": $color-brand-main,
"secondary": #d2ddf3,
// "success": #28a745,
);

/* Buttons */
$btn-font-size: $button-font-size;
$btn-padding-x: $button-padding-x;
$btn-padding-y: $button-padding-y;
$btn-border-radius: $button-border-radius;
$btn-font-weight: $button-font-weight;

$btn-padding-x-sm: $button-padding-x-small;
$btn-padding-y-sm: $button-padding-y-small;
$btn-font-size-sm: $button-font-size-small;

// $theme-colors: map-merge($theme-colors, (
// "primary-hover": green,
// "secondary-hover": pink,
// "success-hover": gold,
// // Add more button hover colors as needed
// ));

// Import Bootstrap
@import '../../node_modules/bootstrap/scss/bootstrap.scss';


just the basics: Primary button must have a bgcolor with white text. On hover it must be an outlined version.

secondary button must have a bg-color with a different text-color and over it must be darkened (bg-color)

Also I want to implement a small version too.

This is different from the default bootstrap styling.

I tried the theme-colors approuch but dit not succeed.

Can someone help me with this issue. How can I use mixins the right way.

Note: styleGuide.scss is my own stylesheet where I declared al my colors/styles/helpers like $button-primairy-background.

Continue reading...