Tengo una hoja de estilo y muchos estilos con el mismo color de borde (#CCCCCC para ser precisos).¿Cómo puedo reutilizar un color en una hoja de estilo?
¿Hay una manera de especificar algún tipo de variable y reutilizar eso, así que en lugar de escribir #CCCCCC una y otra vez, me puede escribir:
border: 1px solid $bordercolor;
P. S. Estoy usando ASP.NET MVC.
No es que yo sepa, pero que podría generar su CSS de una página de .NET.
A continuación, llame con
Y StyleSheet.aspx sería algo como
<%@ Page Language="C#" %>
H1
{
background-color:<%= MyColourVariable %>;
}
EDIT: Sin embargo, en la actualidad se recomienda usar LESS o SASS
¿La creación dinámica de un archivo CSS evita que se guarde en caché? – Jens
Jens, no. El almacenamiento en caché depende del tipo de mime del activo servido y de las propiedades específicas del activo que se ve en el navegador, que varían según el navegador, para determinar si el caché está sin datos. –
Y siempre puede agregar el almacenamiento en caché de la página si desea controlarlo en el servidor (para que no se vuelva a crear en el servidor) http://support.microsoft.com/kb/308375 – CaffGeek
Puede establecer el estilo de borde para una etiqueta principal. Por ejemplo, si cada elemento de su #content utiliza estas propiedades de borde, puede aplicar el estilo de borde deseado a #contenido.
Extender el estilo en el color se define
LE: ver la muestra de KennyTM
-1: sin contenido real. – ANeves
.classA, .classB, .classC {
border-color: #CCC;
}
.classA {
border-width: 1px;
border-style: solid;
}
...
Pero se puede' t usa la sintaxis de mano corta para definir más el borde.
Bien, en realidad no uso eso, poniendo selectores más de una vez en la hoja de estilo. Estoy viendo esto como codificación inversa css: no digo "classA es border-color this y font that", pero digo "border-color esto se aplica a ClassA y ClassB, y fuente que se aplica a la clase C". Muy agradable. – Michel
Hago este tipo de cosas con regularidad, si no quiero bordes en todos los lados, es decir, 'ancho del borde: 1px 0; border-style: sólido; border-color: # ccc' – DisgruntledGoat
Un elemento puede tener varias clases asignadas. Por lo que podría crear un estilo que te define la frontera del color y lo utiliza en conjunción con otras clases de otros atributos:
.bordercolor { border-color:#CCCCCC; }
<div class="bordercolor otherstyle">
Puede servir su CSS como un archivo php con el tipo texto/css. Entonces de esa manera puedes usar todas las variables de PHP que quieras. Esto funciona en todos los navegadores. He aquí un ejemplo:
Realmente no se puede definir variables en CSS, pero se puede ordenar de hacer lo que está después de algunas maneras. Primero, puedes aplicar múltiples clases a tu elemento y solo mantener el color en su propia clase.
.myBorderColor { border-color: #000000; }
.myOtherClass { font-weight: bold; }
<div class="myBorderColor myOtherClass">content</div>
La otra alternativa es realmente poner en cascada sus estilos para que se aplique más de 1 bloque.
div.a { font-weight: bold; }
div.b { color: #cccccc; }
div.a div.b { border-color: #000000; }
De esta manera todavía está controlando su color desde 1 lugar.
Solo asegúrate de no seguir el estilo que usa nuestro diseñador web y nombra las clases "fontbold" y "borderblack"/"bordergray"/"borderblue" ... Eso es realmente un estilo tan malo como los nombres deben decir cómo se usa, no cómo se ve. – dbemerlin
El uso de una clase '.myBorderColor' es precisamente a lo que se refiere dbmerlin. – ANeves
@dbemerlin Creo que cuando comience a aplicar esta técnica, también me sentiría tentado a usar nombres como borderblue y borderblack, porque creo que sería fácil al principio usar este tipo de nombres en lugar de nombres más descriptivos. Pero tienes razón, ese no es el camino a seguir. – Michel
Creo que te puedes estar refiriendo a CSS variables. Lamentablemente, no están bien respaldados.
Eso sería genial * si * era compatible ... –
¡Sí! pero de hecho, Desafortunadamente ... – Michel
Varias personas han hecho HttpHandlers que agregan soporte variable a CSS.Básicamente, HttpHandler se ocupa de reemplazar las variables con sus valores antes de que el cliente vea el CSS. Los ejemplos incluyen:
Esto sin duda va a funcionar. No lo he probado en ninguna de mis aplicaciones, así que no puedo hablar sobre las implicaciones del rendimiento.
También podría usar un CSS de "nivel superior". Sass y Less ambos ofrecen variables. Trabajan escribiendo en un idioma que es un superconjunto de CSS y luego compilan en CSS cuando están probando/implementando. Hay ganchos para RoR para ambos, puede haber uno para asp.net.
genial. Menos se ve muy prometedor. – Michel
Debo mencionar que Sass tiene una sintaxis alternativa que es similar a la de CSS. –
Estaba pensando en la plantilla T4 también. Creo que es Visual Studio, por lo que no es la manera más genérica de hacerlo, pero pensé que lo compartiría.
<#@ template inherits="Microsoft.VisualStudio.TextTemplating.VSHost.ModelingTextTransformation" language="C#v3.5" debug="true" hostSpecific="true" #>
<#@ output extension=".css" #>
<# string font = " font-family: Verdana, Helvetica;\n\tfont-size: 11px;";#>
body {
<#= font #>
}
table.Bid {
background-color:red;
<#= font #>
}
Esto genera un archivo test.css con este contenido:
body {
font-family: Verdana, Helvetica;
font-size: 11px;
}
table.Bid {
background-color:red;
font-family: Verdana, Helvetica;
font-size: 11px;
}
En Rails, esto funciona muy bien para mí:
http://unixgods.org/~tilo/Ruby/Using_Variables_in_CSS_Files_with_Ruby_on_Rails.html
tal vez usted podría escribir un pre similares -procesador para .NET Framework ..?
No es que yo sepa, pero podría generar su CSS desde una página .NET. (Se agregó la respuesta a continuación con más detalles) – CaffGeek
+1 Excelente pregunta. Tengo este problema también. –
No estoy seguro si es aplicable (y apenas lo he usado), pero Sass (http://sass-lang.com/) parece cubrir esto. Está escrito en Ruby (creo), pero allí * está * IronRuby ahora ... –