edteam - Cree una variable en el archivo.CSS para usar dentro de ese archivo.CSS

variables css edteam

Question

Posible duplicado:
Evitar constantes repetidas en CSS

Tenemos algunos "colores de tema" que se reutilizan en nuestra hoja de CSS.

¿Hay alguna forma de establecer una variable y luego reutilizarla?

P.ej

.css
OurColor: Blue

H1 { 
 color:OurColor;
}

Answer 1

CSS no (todavía) emplea variables, lo que es comprensible por su edad y por ser un lenguaje declarativo.

Aquí hay dos enfoques principales para lograr un manejo de estilo más dinámico:

• Variables del lado del servidor en css en línea
  Ejemplo (usando PHP):

  <style> .myclass{color:<?php echo $color; ?>;} </style>

• Manipulación DOM con javascript para cambiar css del lado del cliente
  Ejemplos (usando la biblioteca jQuery):

  $(''.myclass'').css(''color'', ''blue'');

  O

  //The jsvarColor could be set with the original page response javascript  // in the DOM or retrieved on demand (AJAX) based on user action. $(''.myclass'').css(''color'', jsvarColor);

Answer 2

CSS no ofrece tal cosa. La única solución es escribir un script de preprocesamiento que se ejecute manualmente para producir salida CSS estática basada en algún pseudo-CSS dinámico, o que esté conectado al servidor web y preproceses el CSS antes de enviarlo al cliente.

Answer 3

Como CSS no tiene eso (sin embargo, creo que la próxima versión lo hará), siga los consejos de Konrad Rudolphs para el preprocesamiento. Probablemente desee usar uno que ya exista: m4

http://www.gnu.org/software/m4/m4.html

Answer 4

Consulte también Evitar constantes repetidas en CSS . Como dijo Farinha, se ha hecho una propuesta de CSS Variables, pero por el momento, quiere usar un preprocesador.

Answer 5

Eso no es compatible en este momento a menos que use algún script para producir el CSS basado en algunas variables definidas por usted.

Parece, sin embargo, que al menos algunas personas del mundo de los navegadores están trabajando en ello . Entonces, si realmente se convierte en un estándar en el futuro, tendremos que esperar hasta que se implemente en todos los navegadores (no se podrá usar hasta entonces).

Answer 6

Esto puede parecer una locura, pero si está usando NAnt (o Ant o algún otro sistema de compilación automatizado), puede usar las propiedades NAnt como variables de CSS de una manera hacky. Comience con un archivo de plantilla CSS (quizás styles.css.template o algo así) que contenga algo como esto:

a {
    color: ${colors.blue};
}

    a:hover {
        color: ${colors.blue.light};
    }

p {
    padding: ${padding.normal};
}

Y luego agregue un paso a su compilación que asigna todos los valores de propiedad (yo uso archivos de compilación externos y <include>) y uso el filtro <expandproperties> para generar el CSS actual:

<property name="colors.blue" value="#0066FF" />
<property name="colors.blue.light" value="#0099FF" />
<property name="padding.normal" value="0.5em" />

<copy file="styles.css.template" tofile="styles.css" overwrite="true">
    <filterchain>
        <expandproperties/>
    </filterchain>
</copy>

La desventaja, por supuesto, es que debe ejecutar el objetivo de generación css antes de que pueda verificar cómo se ve en el navegador. Y probablemente te restrinja a generar todo tu CSS manualmente.

Sin embargo, puede escribir funciones NAnt para hacer todo tipo de cosas interesantes más allá de la expansión de propiedades (como generar dinámicamente archivos de imágenes de degradado), así que para mí han valido la pena los dolores de cabeza.

Answer 7

He escrito una macro (en Visual Studio) que me permite no solo codificar CSS para colores con nombre, sino también calcular tonos o combinaciones de esos colores fácilmente. También maneja fuentes. Dispara en guardar y muestra una versión separada del archivo CSS. Esto está en línea con el argumento de Bert Bos de que cualquier procesamiento de símbolos en CSS tiene lugar en el momento de la creación, no en el punto de interpretación.

La configuración completa junto con todo el código sería un poco complicado de publicar aquí, pero podría ser apropiado para una publicación de blog en el futuro. Aquí está la sección de comentarios de la macro, que debería ser suficiente para comenzar.

Los objetivos de este enfoque son los siguientes:

1. Permita que los colores base, las fuentes, etc. se definan en una ubicación central, de modo que toda una paleta o un tratamiento tipográfico se pueda ajustar fácilmente sin tener que usar búsqueda / reemplazo

2. Evite tener que asignar la extensión .CSS en IIS

3. Genere archivos CSS de texto de variedad de jardín que se puedan usar, por ejemplo, mediante el modo de diseño de VisualStudio

4. Genere estos archivos una vez en el momento de la creación, en lugar de volver a calcularlos cada vez que se solicite el archivo CSS.

5. Genere estos archivos de forma instantánea y transparente, sin agregar pasos adicionales al flujo de trabajo de tweak-save-test

Con este enfoque, los colores, las tonalidades de los colores y las familias de fuentes se representan con tokens abreviados que hacen referencia a una lista de valores en un archivo XML.

El archivo XML que contiene las definiciones de color y fuente se debe llamar Constants.xml y debe residir en la misma carpeta que los archivos CSS.

El método ProcessCSS es activado por EnvironmentEvents cada vez que VisualStudio guarda un archivo CSS. El archivo CSS se expande y la versión expandida y estática del archivo se guarda en la carpeta / css / static /. (Todas las páginas HTML deben hacer referencia a / css / static / versions de los archivos CSS).

El archivo Constants.xml podría verse más o menos así:

<?xml version="1.0" encoding="utf-8" ?>
<cssconstants>
  <colors>
    <color name="Red" value="BE1E2D" />
    <color name="Orange" value="E36F1E" />
    ...
  </colors>
  <fonts>
    <font name="Text" value="''Segoe UI'',Verdana,Arial,Helvetica,Geneva,sans-serif" />
    <font name="Serif" value="Georgia,''Times New Roman'',Times,serif" />
    ...
  </fonts>
</cssconstants>

En el archivo CSS, puede tener definiciones como:

   font-family:[[f:Text]];
   background:[[c:Background]]; 
   border-top:1px solid [[c:Red+.5]]; /* 50% white tint of red */

Answer 8

Lo estás haciendo demasiado complicado. Esta es la razón por la que existe la cascada. Simplemente proporcione sus selectores de elementos y clasifique su color:

h1 {
   color: #000;
}
.a-theme-color {
   color: #333;
}

Luego, aplíquelo a los elementos en el HTML, anulando cuando necesite usar los colores de su tema.

<h1>This is my heading.</h1>
<h1 class="a-theme-color">This is my theme heading.</h1>

Answer 9

No eres el primero en preguntarte y la respuesta es no. Elliotte tiene una bonita queja sobre ella: http://cafe.elharo.com/web/css-repeats-itself/ . Puede usar JSP, o su equivalente, para generar el CSS en tiempo de ejecución.

Answer 10

No hay ningún requisito de que todos los estilos para un selector residan en una sola regla, y una sola regla se puede aplicar a múltiples selectores ... así que dé la vuelta :

/* Theme color: text */
H1, P, TABLE, UL
{ color: blue; }

/* Theme color: emphasis */
B, I, STRONG, EM
{ color: #00006F; }

/* ... */

/* Theme font: header */
H1, H2, H3, H4, H5, H6
{ font-family: Comic Sans MS; }

/* ... */

/* H1-specific styles */
H1
{ 
   font-size: 2em; 
   margin-bottom: 1em;
}

De esta manera, evita repetir estilos que son conceptualmente iguales, al tiempo que deja en claro a qué partes del documento afectan.

Observe el énfasis en "conceptualmente" en la última frase ... Esto acaba de aparecer en los comentarios, así que voy a ampliarlo un poco, ya que he visto gente haciendo este mismo error una y otra vez durante años. incluso antes de la existencia de CSS: dos atributos que comparten el mismo valor no necesariamente significa que representan el mismo concepto . El cielo puede aparecer rojo por la noche, al igual que los tomates, pero el cielo y el tomate no son rojos por la misma razón, y sus colores variarán con el tiempo de forma independiente. De la misma manera, el hecho de que tenga dos elementos en la hoja de estilos que tengan el mismo color, tamaño o posición no significa que siempre compartirán estos valores. Un diseñador ingenuo que utiliza la agrupación (como se describe aquí) o un procesador variable como SASS o LESS para evitar la repetición de valores corre el riesgo de hacer que los cambios futuros al estilo sean increíblemente propensos a errores; siempre enfóquese en el significado contextual de los estilos cuando se busca reducir la repetición, ignorando sus valores actuales .

Answer 11

No, pero sass-lang.com hace esto. Es un preprocesador de CSS que le permite utilizar muchos accesos directos para reducir la cantidad de CSS que necesita para escribir.

Por ejemplo:

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

Más allá de las variables, proporciona la capacidad de anidar selectores, manteniendo las cosas lógicamente agrupadas:

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

Hay más: mixins que actúan como funciones similares y la capacidad de heredar un selector de otro. Es muy inteligente y muy útil.

Si está codificando en Ruby on Rails, incluso lo compilará automáticamente en CSS, pero también hay un compilador de propósito general que puede hacerlo por encargo.

Answer 12

Puede lograrlo y mucho más usando Less CSS .

Answer 13

Puede usar clases mutliple en el atributo de clase del elemento HTML, cada una de las cuales proporciona parte del diseño. Entonces puedes definir tu CSS como:

.ourColor { color: blue; }
.ourBorder { border: 1px solid blue; }
.bigText { font-size: 1.5em; }

y luego combine las clases según sea necesario:

<h1 class="ourColor">Blue Header</h1>
<div class="ourColor bigText">Some big blue text.</div>
<div class="ourColor ourBorder">Some blue text with blue border.</div>

Eso le permite reutilizar la clase ourColor sin tener que definir los tiempos de múltiples colores en su CSS. Si cambia el tema, simplemente cambie la regla de nuestroColor.