Morton 19 de mayo de 2014 a las 08.07
   Imprimir artículo
elWebmaster.com

Organiza los colores de tu CSS m√°s f√°cilmente con Sass


sass-wideUna 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 #0c0c0c ser $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.

Eso es todo ¬°Esperamos que te sea de utilidad!

Fuente original del artículo: David Walsh Blog
Traducción realizada por elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (1)

  1. BlackmartAlpha.net dice:

    La verdad jamás imaginé organizarlo todo de esta manera.
    Lo tomo como nota mental a utilizar en nuevos proyectos.

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder