¿Se pueden tener variables en CSS?

¿Existe alguna manera de tener variables en CSS?

Me explico, digamos que yo quiero que todos los títulos tengo el color #f9f9f9, entonces como se puede hacer para decirle a CSS de un solo cambio que el color de los títulos va a ser f9f9f9 o e2e2e2 sin tener que ir uno por uno para cambiarlos

Respuesta

Pongamos este ejemplo

.tiulo1 {color:#F4F4F4;}
.tiulo2 {color:#F4F4F4;}
.tiulo3 {color:#F4F4F4;}
.tiulo4 {color:#F4F4F4;}
.tiulo5 {color:#F4F4F4;}
.tiulo6 {color:#F4F4F4;}

Tienes dos opciones.

La primera, mediante ordenes del propio css.

.tiulo1, .tiulo2, .tiulo3, .tiulo4, .tiulo5, .tiulo6 {color:#F4F4F4;}

O mediante PHP.

En este caso, debes guardar el archivo como .php y al principio del fichero añadir esto:

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

Posteriormente solo seria construirlo asi

<?
header("Content-type: text/css; charset: UTF-8");
$color = '#F4F4F4';
?>
.tiulo1 {color:<?=$color;?>;}
.tiulo2 {color:<?=$color;?>;}
.tiulo3 {color:<?=$color;?>;}
.tiulo4 {color:<?=$color;?>;}
.tiulo5 {color:<?=$color;?>;}
.tiulo6 {color:<?=$color;?>;}

Lo bueno de esta ultima opcion es que puedes añadir ese codigo de color en todos los conceptos.

.titulo1{color:<?=$color;?>;}
.borde1 {border:1px solid <?=$color;?>;}
.fondo { background-color:<?=$color;?>;}

Hola Adrian, gracias por la respuesta...

Según lo que entiendo en la segunda opción, ¿el archivo debe de ser php y ahí mismo se defino los estilos? Pero de esta forma una tercera página no podrá usar esos estilo porque están guardado en la primera, ¿cierto?

Gracias por tu ayuda

Es fácil. Tu creas un archivo que solo contiene esto:

¿

¿
<?
header("Content-type: text/css; charset: UTF-8");
//AQUI DEBAJO LAS VARIABLES
?>
Body{}

Lo guardas en la misma carpeta que tus archivos.

Y lo llamas desde cada archivo con:

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

Básicamente es como cuando insertas un archivo .css pero en este caso es el .php que se comporta como un .

P.D. Olvidate de los signos ¿no se porque se han puesto. Se me olvidó mencionar que en ejemplo he guardado el archivo php como estilos.php, si lo guardas con otro nombre cambialo en el href

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas