Organizar tus colores con NameThatColor

Una de las mejores razones para usar Sass son las variables, con las que puedes mantener tu código limpio, facilitando su mantenimiento y posibles cambios. Sin embargo, con colores, es fácil que las variables se te escapen de las manos. En este artículo, te mostraremos un rápido y simple método para organizar tus variables de color.

Digamos que tienes el siguiente código SS:

h1 {
  background-color: #b0eb00;
}

a {
  color: #b0eb00;
}

button {
  border-color: #b0eb00;
  box-shadow: 0 0 1rem #b0eb00;
}

Si decides usar un color diferente a #b0eb00, tendrás que cambiarlo en todas partes. Esto se hará notablemente molesto en proyectos más grandes. Pero, con Sass, puedes usar una variable:

$yellow-green: #b0eb00;

h1 {
  background-color: #b0eb00;
}

a {
  color: #b0eb00;
}

button {
  border-color: #b0eb00;
  box-shadow: 0 0 1rem #b0eb00;
}

Ahora, es fácil cambiar el valor de $yellow-green en todas partes.

Cuando comiences a acumular varias variables de color, decidirás manteneras juntas en su propio archivo.

$yellow-green: #b0eb00;
$gray: #595959;
$dark-gray: #363636;
$light-gray: #a6a6a6;

Pero con el tiempo, ese archivo crecerá hasta que ya no resulte tan sencillo.

$yellow-green: #b0eb00;
$red: #b30015;
$blue: #2a00b3;
$other-blue: #0077b3;
$cyan: #00b0b3;
$transparent-cyan: #24fbff;
$periwinkle: #8a7dff;
$light-gray: #a6a6a6;
$gray: #595959;
$darkish-gray: #444;
$dark-gray: #363636;
$darker-gray: #303030;
$darkest-gray: #292929;
$darkester-gray: #111;

Cada vez que añades un nuevo color, será más dificil encontrarle un nombre. ¿Debe #0c0c0cser $darkesterest-gray? ¿O que tal $almost-black? Usando estas variables, es dificil recordar los nombres sin estar mirándolos.

Para nombrar correctamente los colores y no toparte con conflictos luego, puedes utilizar una herramienta como Name That Color y renombrar las variables:

$lime: #b0eb00;
$bright-red: #b30015;
$dark-blue: #2a00b3;
$deep-cerulean: #0077b3;
$bondi-blue: #00b0b3;
$cyan: #24fbff;
$heliotrope: #8a7dff;
$silver-chalice: #a6a6a6;
$scorpion: #595959;
$tundora: #444;
$mine-shaft: #363636;
$cod-gray: #111;

Ahora tus variables tienen nombres únicos y memorables.

Un tip extra: Cuando dos colores son muy cercanos, por ejemplo #303030 y #292929, ambos caerían bajo el mismo nombre (en este caso,  $mine-shaft). Para evitarlo, si un nombre de color va a ser duplicado, es preferible usar las funciones de color que incluye Sass. Por ejemplo, puedes utilizar darken($mine-shaft, 2.5%) en lugar de #303030.