Functions

A reference list for the custom functions and directives we use throughout the Sass files

• Colors

  • Color contrast

• Escape SVG

¶Colors

You can lighten or darken colors with tint-color() and shade-color() functions. These functions will mix colors with black or white, unlike Sass' native lighten() and darken() functions which will change the lightness by a fixed amount, which often doesn’t lead to the desired effect.

Later, you can use these functions like this:

.custom-element {
    color: tint-color($primary, 10%);
}

.custom-element-2 {
    color: shade-color($danger, 30%);
}

¶Color contrast

An additional function we use is the color contrast function, color-contrast included in Bootstrap. It utilizes the WCAG 2.0 algorithm for calculating contrast thresholds based on relative luminance in a sRGB colorspace to automatically return a light (#fff), dark (#212529) or black (#000) contrast color based on the specified base color.

.custom-element {
    color: color-contrast(#000);
}

// returns `color: #fff`

You can also specify a base color with our color map functions:

.custom-element {
    color: color-contrast($dark); // returns `color: #fff`
}

¶Escape SVG

We use the escape-svg function to escape the <, > and # characters for SVG background images. When using the escape-svg function, data URIs must be quoted.

// Data URIs must be quoted.
$svg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>");

// Using the function
escape-svg($form-check-input-checked-bg-image)