Es seguro que en algún momento todos los que trabajamos con CSS echamos en falta las conocidas variables, elementos esenciales en cualquier lenguaje de programación. Para solventarlo se me ocurren varias formas:

• Evitar las redundancias.
• Usar mejor la descendencia en los selectores.
• Definir las variables como meros comentarios.
• Usar variables de PHP u otro lenguaje dinámico de servidor.
• Decantarnos por CSS 3.

Es probable que existan más formas ¿conoces alguna?, bueno… de momento voy a intentar explicar las mencionadas.

Evitar las redundancias

Ejemplo redundante

h1 { 
	color: #59B0E5; 
	font-size: 1em;
	text-decoration: underline;
}
h2 { 
	color: #59B0E5; 
	font-size: 1.2em; 
	text-decoration: underline;
}

Evitamos redundancias

h1 { font-size: 1em; }
h2 { font-size: 1.2em; }
h1, h2 { 
	color: #59B0E5; 
	text-decoration: underline;
}

El ejemplo es obvio y carece de explicaciones, sin embargo en hojas de estilo complejas la tarea de sintetizar es más complicada.

Usar una mejor la descendencia en los selectores

p em, p strong, p dfn { color: #59B0E5; }

Definir las variables como meros comentarios

En la cabecera del fichero CSS podemos incluir bajo la notación de comentarios las «variables» que entran en juego en la hoja de estilo.

/*
   Primary color: #59B0E5
   Second color: #DA5BA4
*/
p { color: #59B0E5; }
...

Así y con ayuda de la típica herramienta «buscar/reemplazar» podemos cambiar fácilmente los valores en todo el documento.

Usar variables de PHP u otro lenguaje dinámico de servidor

Para ello debemos tener en cuenta varias cuestiones.

Extensión .PHP

La primera de ellas es que el fichero sea interpretado como tal, en el caso de PHP podremos llamar a la hoja de estilos style.php.

Enlace al fichero

<link rel="stylesheet" type="text/css" href='/css/style.php' />

Tipo de contenido

Debemos indicar al servidor web el tipo de contenido de nuestro fichero para que sea correctamente interpretado. Esto lo podemos hacer fácilmente en PHP enviando la cabecera con el tipo MIME.

header("Content-type: text/css;");

Declarando las variables

   $colorweb1 = "#59B0E5";
   $colorweb2 = "#DA5BA4";

Usando las variables

En las propias reglas CSS podemos incrustar las llamadas a las variables de PHP.

h1 { color: ; }
h2 { color: ; }

Decantarnos por CSS 3

Las anteriores soluciones son como «de andar por casa». CSS 3 nos brinda la posibilidad de usar variables reales de forma «nativa». El problema es la retrocompatibilidad con algunos navegadores actuales y todas las antiguas versiones 🙁

Declarando las variables

@variables { colorweb1: #59B0E5; colorweb2: #DA5BA4; }

Usando las variables

h1 { color: var(colorweb1); }
h2 { color: var(colorweb2); }