Variables CSS usando PHP +

La semana pasada en la segunda entrega de Quick Tips: sobre desarrollo web, hacíamos referencia a un articulo de Ajaxian sobre las variables CSS y su posible inclusión en la siguiente versión de este lenguaje pero eso esta aun en veremos.

Mientras tanto nosotros ya podemos gustar de la bendición de los que son las variables CSS usando PHP, pero como? sigan estos simples pasos:

Creamos nuestros archivo CSS con nombre “default.css”

/* globals */
*       { margin:0; padding:0; }
body    { color:$body_text_color; font-size:$body_font_size; }

Ahora viene el codigo php que va aplicar los valores de las variables, en el archivo llamado “stylesheet.php”.

/* get the stylesheet */
$stylesheet = @is_file($_GET['stylesheet']) && strtolower(substr(strrchr($file_name,’.'),1)) == ‘css’ ? $_GET['stylesheet'] : ‘default.css’;

/* set the header information */
//will be output as css
header(’Content-type: text/css’);
//set an expiration date
$days_to_cache = 10;
header(’Expires: ‘.gmdate(’D, d M Y H:i:s’,time() + (60 * 60 * 24 * $days_to_cache)).’ GMT’);

/* set the dynamic information */
//default css variable information
$default = array(
	‘body_font_size’ => ‘16px’,
	‘body_text_color’ => ‘#00f’
);

//red css variable information
$red = array(
	‘body_font_size’ => ‘10px’,
	‘body_text_color’ => ‘#f00′
);

/* extract the propery array’s information */
extract($_GET['theme'] && ${$_GET['theme']} ? ${$_GET['theme']} : $default);

/* load in the stylesheet */
$content = preg_replace(’/$([w]+)/e’,'$0′,@file_get_contents($stylesheet));

/* spit it out */
echo $content;

Eso es todo ahora lo que cambia en nuestro código HTML es cuando hablamos a la hoja de estilos en vez de pedir el default.css vamos a hablar al “stylesheet.php”, ejemplo:

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

Eso es todo el resultado de nuestro CSS debe ser el siguiente:

/* globals */
*		{ margin:0; padding:0; }
body		{ color:#00f; font-size:16px; }

Nota: El archivo default.css jamas se va a sobreescribir con los valores de las variables, simplemente cuando hablamos al stylesheet.php este procesa el CSS reemplazando las variables por valores y se lo devuelve al servidor ya con valores para que sea interpretado, sin haber modificado el archivo CSS.

Via: davidwalsh, CSS Variables using PHP (en ingles)