Colores
Color sass mapsGenerating utilities

<< Opciones con Sass Componentes >>

Muchos de los componentes construidos en Bootstrapt tienen una serie de colores definidas en el map de Sass($theme-colors).

$theme-colors: (
    "primary": $primary,
    "secondary": $secondary,
    "success": $success,
    "info": $info,
    "warning": $warning,
    "danger": $danger,
    "light": $light,
    "dark": $dark
);

La definición de los colores se encuentra en el archivo scss/_variables.scss.

Estos son los colores básicos que tiene, los cuales los modifican mediante el valor (blanco/negro/peso), creando una paleta de colores.

Color sass maps

Dentro del archivo scss/_variables.scss, encontramos 3 maps de colores que nos facilitan y sus valores hexadecimales.

  • $colors: Lista todos los colores
  • $theme-colors: Lista los colores semánticamente nombrados
  • $grays: Lista todos los colores de tonos de grises
$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

Añadir, modificar o eliminar valores de este mapa de colores no es el más acertado, ya que muchos componentes no lo utilizan (por ahora). Hasta entonces tendremos que usar la variable ${color} y ese map de Sass.

Generating utilities

Bootstrap no tiene color ni background-color para cada variable color, pero podemos generárnosla mediante utility API. Para ello, los pasos a seguir son:

  • 1. Nos debemos de asegurar que hemos importado las funciones, variables, mixins y utilities
  • 2. Usamos la fusión para hacer un merge map-merge-multiple() creando un nuevo maps
  • 3. Hacemos un merge para combiar cualquier utility con un nombre de clase {color}-{level}.

Por ejemplo, si queremos generar .text-purple-500:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

Esto nos genera un nuevo .text-{color}-{level} utilities para cada color y nivel.

<< Opciones con Sass Componentes >>