Funciones

<< Sass Color contrast >>

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%);
}

<< Sass Color contrast >>