Funciones
Bootstrap utiliza numerosas funciones de Sass, por ejemplo para los colores podemos oscurecer/aclarar un color utilizando las funciones tint-color() y shade-color(), estas funciones mezclan los colores con blanco o negro como hace Sass con las funciones lighten() y darken().
También tenemos la función shift-color() que combina estas dos funciones. Si el valor es positivo entonces lo oscurece y sino lo aclara.
// Tint a color: mix a color with white
@function tint-color($color, $weight) {
@return mix(white, $color, $weight);
}
// Shade a color: mix a color with black
@function shade-color($color, $weight) {
@return mix(black, $color, $weight);
}
// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}En la práctica, podemos llamar a la función y pasarle el color y % como parámetros:
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}