Create variably custom classes using bootstrap theme-colors

Question

(Pretty green scss/bootstrap user here) So, like bootstrap btn-{color} is coded in scss as some way so that btn-primary and btn-info and btn-danger and btn-warning, etc. are not needed to be individually coded, I'd like to create my own custom class that relies on all the built in theme colors and adapts as they are used in the html. Example HTML: <div class="bflag-success"> this div </div> where the scss is something like

@each $color, $value in $theme-colors { @include border-left-color-variant('.bflag-#{$color}', $value);

so that then any time I use bflag-success or bflag-danger or bflag-info, etc. it adopts that theme color, just like the btn class does.

I feel like I'm close, but adding the above code to my scss fail doesn't compile correctly and lands me with errors... "Error: Undefined mixin"

I suspect its the border-left-color-variant that's missing from somewhere, but I don't know where.

What am I doing missing or doing wrong?

Thanks

Answer 1

I learned how to do this:

Here is the syntax and example code that would be added to the (yourfile).scss file, BELOW the boostrap imports like shown:

// Below this import

@import '~bootstrap/scss/bootstrap';

// add this - changing the "bflag" class prefix to whichever you like

@each $color, $value in $theme-colors {
    .bflag-#{$color} {
        background-color: $value !important;
    }
}

Then for every color you have in either the boostrap scss file, or the bootstrap core imported file, (i.e. primary, secondary, success, danger, info, light, dark, etc. ) the compiler will create a class and styles for that color in your output (yourfile).css file. Example using "primary" and "success" as examples.

.bflag-primary {
    background-color: #3490dc;
}
.bflag-success {
    background-color: #38c172;
}