Color contrast

<< Funciones Opciones con Sass >>

Una funcionalidad extra incluida en Bootstrap es la función color-contrast que utiliza WCAG contrast ratio algorithm para calcular el contraste en base a la luminosidad relativa en sRGB. Esta función es muy útil para mixins o loops donde estamos generando múltiples clases.

Por ejemplo, para generar muestras del mapa $theme-colors:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-contrast($value);
  }
}

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

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

<< Funciones Opciones con Sass >>