Cree una variable en un archivo .CSS para usarla dentro de ese archivo .CSS [duplicado]
https://stackoverflow.com/questions/47487
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Posible duplicado:
Evitar constantes repetidas en CSS
Tenemos algunos "colores de tema" que se reutilizan en nuestra hoja CSS.
¿Hay alguna manera de establecer una variable y luego reutilizarla?
P.ej.
.css
OurColor: Blue
H1 {
color:OurColor;
}
Solución
No es necesario que todos los estilos de un selector residan en una única regla, y una única regla puede aplicarse a varios selectores...entonces darle 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 evitas repetir estilos que son conceptualmente lo mismo, dejando claro a qué partes del documento afectan.
Note el énfasis en "conceptualmente" en la última oración...Esto acaba de surgir en los comentarios, así que lo ampliaré un poco, ya que he visto personas cometiendo el mismo error una y otra vez durante años, incluso antes de la existencia de CSS: Dos atributos que comparten el mismo valor no significa necesariamente que representen lo 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 voluntad varían con el tiempo de forma independiente.Del mismo modo, el hecho de que tenga dos elementos en su hoja de estilo a los que se les da el mismo color, tamaño o posición no significa que lo harán. siempre compartir estos valores.Un diseñador ingenuo que usa agrupación (como se describe aquí) o un procesador variable como SASS o LESS para evitar valor la repetición corre el riesgo de hacer que los cambios futuros en el estilo sean increíblemente propensos a errores;centrarse siempre en el significado contextual de estilos cuando se busca reducir la repetición, ignorando su valores actuales.
Otros consejos
Puedes lograrlo y mucho más usando Menos CSS.
No pero Hablar con descaro a Haz esto.Es un preprocesador de CSS que le permite utilizar muchos atajos para reducir la cantidad de CSS que necesita 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, brinda la capacidad de anidar selectores, manteniendo las cosas agrupadas lógicamente:
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 bajo demanda.
No eres el primero en preguntarse y la respuesta es no.Elliotte tiene una agradable perorata al respecto: http://cafe.elharo.com/web/css-repeats-itself/.Podrías usar JSP, o su equivalente, para generar CSS en tiempo de ejecución.
CSS no ofrece tal cosa.La única solución es escribir un script de preprocesamiento que se ejecute manualmente para producir una salida CSS estática basada en algún pseudo-CSS dinámico, o que esté conectado al servidor web y preprocese el CSS antes de enviarlo al cliente.
Esto no es compatible en este momento a menos que utilice algún script para producir el CSS en función de algunas variables definidas por usted.
Sin embargo, parece 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 (será inutilizable hasta entonces).
Dado que CSS no tiene eso (todavía, creo que la próxima versión lo tendrá), siga los consejos de Konrad Rudolph para el preprocesamiento.Probablemente quieras usar uno que ya exista:m4
Lo estás haciendo demasiado complicado.Ésta 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 del 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>
Escribí una macro (en Visual Studio) que me permite no solo codificar CSS para colores con nombre, sino también calcular fácilmente sombras o combinaciones de esos colores.También maneja fuentes.Se activa al guardar y genera una versión separada del archivo CSS.Esto está en línea con El argumento de Bert Bos que cualquier procesamiento de símbolos en CSS tenga lugar en el momento de la creación, no en el momento de la interpretación.
La configuración completa junto con todo el código sería demasiado complicada para publicarla aquí, pero podría ser apropiada para una publicación de blog más adelante.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:
Permitir colores base, fuentes, etc.definirse en una ubicación central, de modo que una paleta completa o un tratamiento tipográfico se pueda modificar fácilmente sin tener que utilizar la búsqueda/reemplazo
Evite tener que mapear la extensión .CSS en IIS
Genere archivos CSS de texto variados que se pueden utilizar, por ejemplo, en el modo de diseño de VisualStudio.
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.
Genere estos archivos de forma instantánea y transparente, sin agregar pasos adicionales al flujo de trabajo de ajuste, guardado y prueba.
Con este enfoque, los colores, las sombras de 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 debe llamarse Constants.xml y debe residir en la misma carpeta que los archivos CSS.
EnvironmentEvents activa el método ProcessCSS cada vez que VisualStudio guarda un archivo CSS.El archivo CSS se expande y la versión estática expandida del archivo se guarda en la carpeta /css/static/.(Todas las páginas HTML deben hacer referencia a las versiones /css/static/ de los archivos CSS).
El archivo Constants.xml podría verse 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 */
Ver también Evitar constantes repetidas en CSS.Como dijo Farinha, se ha hecho una propuesta de variables CSS, pero por el momento se desea utilizar un preprocesador.
Puede utilizar varias clases en el atributo de clase del elemento HTML, cada una de las cuales proporciona parte del estilo.Entonces podrías 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 el color varias veces en su CSS.Si cambia el tema, simplemente cambie la regla de nuestro Color.
Esto puede parecer una locura, pero si estás usando NAnt (o Ant o algún otro sistema de compilación automatizado), puedes usar las propiedades de NAnt como variables CSS de una manera hacky.Comience con un archivo de plantilla CSS (tal vez estilos.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 asigne todos los valores de propiedad (yo uso archivos de compilación externos y los <incluir>) y use el filtro <expandproperties> para generar el CSS real:
<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 tienes que ejecutar el objetivo de generación CSS antes de poder comprobar cómo se ve en el navegador.Y probablemente te limitaría a generar todo tu CSS a mano.
Sin embargo, puedes escribir funciones NAnt para hacer todo tipo de cosas interesantes más allá de la simple expansión de propiedades (como generar archivos de imágenes de gradiente dinámicamente), por lo que para mí ha valido la pena los dolores de cabeza.
CSS no emplea (todavía) variables, lo cual es comprensible por su antigüedad y por ser un lenguaje declarativo.
Aquí hay dos enfoques principales para lograr un manejo de estilos 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);
