CSS avanzado
Capítulo 6. Técnicas avanzadas
#contenidos h1, #contenidos h2 { color: #369; } a { color: #557E29; } span { background-color: #557E29; }
Los buenos diseñadores utilizan en sus trabajos un número muy reducido de colores que combinan entre sí para diseñar cada elemento de la página. De esta forma, en las hojas de estilos profesionales se repiten una y otra vez los mismos valores. No obstante, CSS no permite definir variables para almacenar los valores que se utilizan constantemente. Si el diseñador quiere modificar el color verde #557E29 de la hoja de estilos anterior, ¿cómo cambia todas las apariciones de ese color verde en la hoja de estilos? Modificar ese color de forma manual es un proceso tedioso y demasiado lento. Afortunadamente, los editores de texto disponen de herramientas para sustituir un valor por otro, aunque tampoco es una solución óptima. Por otra parte, también es común diseñar sitios web idénticos o muy similares en los que sólo cambia su aspecto definido con CSS. En este caso, es habitual que un sitio web se diferencie de otro solamente en algunos pocos valores de su hoja de estilos CSS. La solución consiste nuevamente en modificar todos los valores de colores y tipos de letra para modificar el aspecto del sitio web. Los problemas anteriores se podrían resolver fácilmente si CSS permitiera definir variables como en la siguiente hoja de estilos: $colorAzul = #369; $colorVerde = #557E29; #cabecera { background-color: $colorAzul; color: #FFF; } #contenidos h1, #contenidos h2 { color: $colorAzul; } a { color: $colorVerde; } span { background-color: $colorVerde; }
En la hoja de estilos anterior, el diseñador puede cambiar el tono de verde o de azul haciendo un solo cambio en la hoja de estilos y con la seguridad absoluta de que se modifican todos los elementos de la página y no se comete ningún error.
www.librosweb.es
137