La mayoría de diseñadores web profesionales creen que CSS carece de un mecanismo fundamental para facilitar su trabajo: las variables en las hojas de estilos. Cuando se define una hoja de estilos como la siguiente:
#cabecera {
background-color: #369;
color: #FFF;
}
#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.
No obstante, si la hoja de estilos anterior se quiere reutilizar para otros diseños con colores completamente diferentes, el nombre de las variables anteriores no sería correcto. Por ello, lo más correcto sería crear variables cuyo nombre no incluya información sobre su aspecto:
$colorPrincipal = #369;
$colorSecundario = #557E29;
#cabecera {
background-color: $colorPrincipal;
color: #FFF;
}
#contenidos h1, #contenidos h2 {
color: $colorPrincipal;
}
a {
color: $colorSecundario;
}
span {
background-color: $colorSecundario;
}Lamentablemente, CSS no permite utilizar variables en las hojas de estilos. Por este motivo se han desarrollado varias soluciones que hacen uso del servidor web y de los lenguajes de programación de servidor para incluir variables en las hojas de estilos CSS.
La solución más sencilla consiste en utilizar el mecanismo SSI (Server Side Includes) de los servidores web Apache y Microsoft IIS. A continuación se muestra el proceso completo para el servidor web Apache 2.2:
1) Modificar el archivo de configuración de Apache: dependiendo de tu instalación puede ser el archivo general de configuración httpd.conf o el archivo de configuración .htaccess
En cualquier caso, es necesario añadir las siguientes opciones de configuración:
Options +Includes AddType text/css .scss AddOutputFilter INCLUDES .scss
La configuración anterior le indica al servidor web que los archivos cuya extensión sea .scss son archivos CSS de servidor y que por tanto, se deben procesar antes de enviarlos al usuario.
Para que los cambios en la configuración sean efectivos, no olvides reiniciar el servidor web.
2) Crear la hoja de estilos y guardar el archivo con extensión .scss
3) Añadir las variables a la hoja de estilos utilizando la siguiente sintaxis:
Para definir la variable:
<!--#set var="nombre_de_la_variable" value="valor_de_la_variable" -->
Para utilizar la variable
<!--#echo var="nombre_de_la_variable" -->
Siguiendo con la hoja de estilos de los ejemplos anteriores, el resultado es el que se muestra a continuación:
<!--#set var="colorPrincipal" value="#369" -->
<!--#set var="colorSecundario" value="#557E29" -->
#cabecera {
background-color: <!--#echo var="colorPrincipal" -->;
color: #FFF;
}
#contenidos h1, #contenidos h2 {
color: <!--#echo var="colorPrincipal" -->;
}
a {
color: <!--#echo var="colorSecundario" -->;
}
span {
background-color: <!--#echo var="colorSecundario" -->;
}Si no se quiere utilizar otra extensión para los archivos CSS procesados por el servidor, es posible hacer uso de la directiva XBitHack, tal y como se explica en la documentación oficial de Apache 2.2 sobre SSI.
6.3.1. Lenguajes de programación de servidor
La solución alternativa al uso de las directivas SSI del servidor web consiste en emplear un lenguaje de programación de servidor. Aunque se trata de una técnica diferente, también se basa en procesar las hojas de estilos en el servidor antes de enviarlas al usuario.
Los detalles técnicos de la solución dependen del lenguaje de programación utilizado, pero el mecanismo que se utiliza es idéntico en todos los casos. A continuación se muestra un ejemplo que hace uso del lenguaje de programación PHP.
Para incluir variables en las hojas de estilos CSS, se crea un archivo con extensión .php y se utiliza la sintaxis que se muestra en el siguiente ejemplo:
<?php
header('content-type:text/css');
$nombre_variable1 = 'valor_variable1';
$nombre_variable2 = 'valor_variable2';
echo <<<FINCSS
selector {
propiedad1: $nombre_variable1;
propiedad2: $nombre_variable2;
}
FINCSS;
?>Siguiendo con la hoja de estilos de los ejemplos anteriores, el archivo PHP completo es el siguiente:
<?php
header('content-type:text/css');
$colorPrincipal = '#369';
$colorSecundario = '#557E29';
echo <<<FINCSS
#cabecera {
background-color: $colorPrincipal;
color: #FFF;
}
#contenidos h1, #contenidos h2 {
color: $colorPrincipal;
}
a {
color: $colorSecundario;
}
span {
background-color: $colorSecundario;
}
FINCSS;
?>Por último, cuando enlaces la hoja de estilos generada con este método, no olvides utilizar la extensión .php en el nombre del archivo de la hoja de estilos:
<link type="text/css" rel="stylesheet" href="/css/estilos.php" />6.3.2. CSS como lenguaje de programación
Las soluciones que permiten utilizar variables en las hojas de estilos han evolucionado de tal manera que alguna de ellas permite utilizar CSS como si fuera un lenguaje de programación. Una de estas soluciones es CSS Cacheer, ideada por el diseñador Shaun Inman.
En primer lugar, CSS Cacheer permite utilizar variables en las hojas de estilos, aunque en esta solución se denominan "constantes":
@constants {
nombre_de_la_constante: valor_de_la_constante;
}
selector {
propiedad: const(nombre_de_la_constante);
}CSS Cacheer también permite definir unos estilos base que se reutilizan en diferentes elementos:
@base(tipografia_basica) {
font-family: Arial, sans-serif;
line-height: 1.5;
}
p {
based-on: base(tipografia_basica);
font-size: 110%;
}
h1 {
based-on: base(tipografia_basica);
font-size: 200%;
}CSS Cacheer es tan avanzado que permite incluso anidar selectores como se muestra en el siguiente ejemplo:
ul {
propiedad1: valor1;
li {
propiedad2: valor2;
}
}Si se procesan las reglas CSS anteriores con CSS Cacheer, el resultado es el siguiente:
ul {
propiedad1: valor1;
}
ul li {
propiedad2: valor2;
}