Definir el nombre de un nuevo color

[Bravenap]

Muy buenas. Seguro que se puede.

Me gustaría definir en una hoja de estilo un color de modo que se pueda utilizar en varias clases, ya sea para fondos, color de texto, etc. Por ejemplo:

Código:

verdecico: #757535;

.fondo {background-color:verdecico;}
.letrasVerdes {color: verdecico;}

De manera que simplemente cambiando la definición de "verdecico" cambie todo lo que utiliza ese color y no haya que cambiar el código de todas las clases.

Gracias y un saludo.

[fearlex]

Iniciado por Bravenap

Me gustaría definir en una hoja de estilo un color de modo que se pueda utilizar en varias clases, ya sea para fondos, color de texto, etc. Por ejemplo:

Código:

verdecico: #757535;
.fondo {background-color:verdecico;}
.letrasVerdes {color: verdecico;}

De manera que simplemente cambiando la definición de "verdecico" cambie todo lo que utiliza ese color y no haya que cambiar el código de todas las clases.

Esto no es posible, lo que mencionas es como tener una variable, declararle un nombre, y ponerle un valor, y solo utilizar ese valor cuando te haga, falta, eso seria una BUENISIMA idea, pero usando CSS solamente, eso no es posible.

[AlZuwaga]

Igual es posible usando algún lenguaje de programación server-side.
Hacés tus estilos en un archivo asp/php, lo incluís como si un archivo CSS se tratase, y le hacés enviar la cabecera correspondiente para que el navegador lo interprete como un archivo CSS. Luego:

Código:

<? $verdecico = "#757535" ; ?>

.fondo {background-color:<? echo $verdecico; ?>;}
.letrasVerdes {color: <% response.write verdecico %>;}

Es muy cómodo... no sé por qué no lo he implementado todavía!

[fearlex]

Iniciado por Al Zuwaga

Igual es posible usando algún lenguaje de programación server-side.
Hacés tus estilos en un archivo asp/php, lo incluís como si un archivo CSS se tratase, y le hacés enviar la cabecera correspondiente para que el navegador lo interprete como un archivo CSS. Luego:

Código:

<? $verdecico = "#757535" ; ?>

.fondo {background-color:<? echo $verdecico; ?>;}
.letrasVerdes {color: <% response.write verdecico %>;}

Es muy cómodo... no sé por qué no lo he implementado todavía!

Estoy de acuerdo contigo, seria genial para mi usando php.

:D

[AlZuwaga]

Aunque lo veo un poco incómodo a la hora del desarrollo... cuando éste está terminado y hay que hacer retoques menores (como el cambio de un color), si lo veo práctico.

[ramm]

Iniciado por Al Zuwaga

Igual es posible usando algún lenguaje de programación server-side.
Hacés tus estilos en un archivo asp/php, lo incluís como si un archivo CSS se tratase, y le hacés enviar la cabecera correspondiente para que el navegador lo interprete como un archivo CSS. Luego:

Código:

<? $verdecico = "#757535" ; ?>

.fondo {background-color:<? echo $verdecico; ?>;}
.letrasVerdes {color: <% response.write verdecico %>;}

Es muy cómodo... no sé por qué no lo he implementado todavía!

Yo si lo he implementado, y es muy util en algunos casos.

Lo que tendrias que cambiar es el encabezado:

Código:

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

   $verdecico = "#757535" ; 

?>

.fondo {background-color:<?php echo $verdecico; ?>;}
.letrasVerdes {color: <?php echo $verdecico ?>;}

Luego cuando llames al css le pones en el link

Código:

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

Por ciertoq eu no entendi la mezcla de ASP y PHP en ese code XD

[AlZuwaga]

Por ciertoq eu no entendi la mezcla de ASP y PHP en ese code XD

Es que no tiene sentido, puesto que es un ejemplo infuncional. Usé los dos, porque son... bah, porque simplemente se me ocurrió ;)

[Bravenap]

Estupendo, muchas gracias a los tres. Es una faena que no se haya pensado en variables para CSS. Sólo le veo un pequeño problemita a vuestra solución. Va a tener que cargar siempre la hoja de estilo porque no la almacenará en la caché del navegador ¿verdad?

Bueno, voy a darle al tema (ASP.Net)

Muchas gracias de nuevo. Un saludo.

[Bravenap]

Por cierto, se me olvidó comentaros que la clave estaba en buscar "variables CSS" (¿cómo no se me ocurrió? ). He encontrado, por tanto, esta otra pequeña explicación, con código para descargar incluido, que está bastante bien. Sería para ASP.Net, tanto si tienes acceso al ISS como si no.

Un saludo.

[Sanva]

Y el tema de la caché es fácil de solucionar, sólo tienes que enviar un header indicándole al navegador que debe almacenar el archivo en caché.

Ejemplo en PHP:

Código:

header("Expires: Sat, 30 Jun 2008 12:00:00 GMT"); // HTTP/1.1

Más información sobre metadatos

[Bravenap]

Muy bien, listo. Este sería el resultado:

Código PHP:

  <%@ Page Language="VB" ContentType = "text/css"%> 
<% 
Dim fondoCabecera As String = "#d8d8aa" 
Dim fondoNormal As String = "#f6f6eb" 
Dim colorBorde As String = "#757535" 
%> 
 
.cajaRedCabecera 
{ 
    margin: 25px auto auto auto; 
    width: 100%; 
    padding: 5px; 
    background-color: <% = fondoCabecera %>; 
    border: 2px solid <% = colorBorde %>; 
    border-bottom: 0; 
} 
.cajaRedNormal 
{ 
    margin: 0px auto auto auto; 
    width: 100%; 
    padding: 5px; 
    background-color: <% = fondoNormal %>; 
    border: 2px solid <% = colorBorde %>; 
    height: auto; 
}  
   

Sobre lo de la caché, estaba pensando que la hoja tampoco es muy grande, por lo que no importaría que se cargara siempre. Además, si cambio el estilo el cliente no lo vería. No obstante, lo que sí podría hacer es mantenerla en caché sólo durante la sesión.

Un saludo y gracias.