Using Bootstrap 5 Sass functions

Bootstrap 5 contains various Sass functions, and most of them are placed in the _functions.scss file. Some of these functions are used to evaluate the source code or manipulate Sass maps, but in this section, we will focus on the more useful color functions. There are a number of different color functions in Bootstrap 5, and we will now see examples of how we can use some of those in our own Sass code. We won’t use any of these functions for our website but instead, look at some isolated examples.

Tint color

The tint-color() function increases the lightness of a color by mixing it with white using the color mix function of Sass. You specify the $color and how much you want it to lighten, defined as the $weight.

The code for the function looks like this:

bootstrap/scss/_functions.scss line 205-208

@function tint-color($color, $weight) {
  @return mix(white, $color, $weight);
}

Here’s an example of how to tint...