How to reference bootstrap colors as a variable in css?

Question

I'm trying to customize my bootstrap theme a bit. I'd like to do something like this in my own css file:

div {
background-color: @brand-warning;//or @body-bg or @dark-gray, etc
}

That is, Bootstrap has a warning color variable, but I'd like to access it. Anyway to do this?

Thanks

Answer 1

Bootstrap 4 defines CSS variables for theme colors that can be used in supporting browsers without compiling from SCSS: https://getbootstrap.com/docs/4.3/getting-started/theming/#css-variables

.my-warning {
    background-color: var(--warning);
}

There are also utility classes for text and background colors: https://getbootstrap.com/docs/4.3/utilities/colors/

<div class="bg-warning">Warning</div>

CodePen example