Variables en CSS; Implementaciones

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); }
Compartir:

3 Comments

  • Qué bueno lo de las variables en CSS 3, lástima que tengamos que esperar «un poco».

    Yo estoy usando últimamente PHP en CSS con buenos resultados. El único problema es que los editores se suelen hacer un lío con la sintaxis de ambos lenguajes y marcan como error los trozos de PHP. Por lo demás, usar PHP en CSS tiene cantidad de ventajas:

    Sirve para hacer debug pasando parámetros en la URL. Por ejemplo, poner un borde a todos los elementos: style.php?border=true
    Hacer conversiones automáticas de px a emes (para vagos)
    Sitios con distintos colores para distintas secciones
    Adaptar los estilos a las preferencias del usuario (tamaño de fuente, colores…)

    Saludos!

    (Espero que salga el html en el comentario :P)

  • Como siempre ayudando con cosas útiles !! La mala suerte de todos estos adelantos que son muchos y muy buenos es que siempre hay atrasos en forma de navegadores …. mientras se sigan manteniendo navegadores obsoletos que impidan que la web mejore tanto en CSS, xHtml y todo lo que usamos hoy en día todas estas cosas que nos podrían ayudar en el día a día no sirven para nada 🙁

    En fin … gracias por el aporte, no había leido nada de las variables (la verdad que soy un poco vago para buscar :P, por suerte tas tú por aquí jejje :))

    Un abrazo chavalín !! 😉

Comments are closed for this post