Simplificación en CSS con variables

Hoy aprendí una nueva técnica para hacer nuestras hojas de estilo mucho más simple y fácil de modificar, realmente siempre había visto el uso de la técnica de variables pero nunca lo entendí, así que se los explico:

variables-440x191

La primera columna tiene por supuesto dos estilos CSS, en la segunda hay una variable

 @brand-color:#4D926F;

La variable funciona de forma similar que en la programación, una vez que declaramos @ más un nombre cualquiera y le asignamos un valor es posible que en nuestros estilos en vez de volver a escribir el valor una y otra vez, pongamos nuestra variable y cuando deseemos modificar el valor, modificamos el valor de la variable, la imagen lo explica mejor que yo.

reglas-440x177

En este ejemplo se ve claramente otro tipo de simplificación, se trata de meter dentro de un estilo otro estilo, simplificando lo que en la primera columna aparece: un estilo y otro estilo derivado del primero, en ligar de eso en el estilo primario se mete el secundario y listo.

Vía wwwhat’snew

Posts relacionados

Simplificación en CSS con variables Simplificación en CSS con variables Reviewed by Marcos Rivas Rojas on jueves, julio 30, 2009 Rating: 5