css - sirve - ¿Cómo puedo reutilizar un color en una hoja de estilo?
link rel= stylesheet para que sirve (13)
Tengo una hoja de estilo y muchos estilos con el mismo color de borde ( #CCCCCC para ser precisos).
¿Hay alguna manera de especificar algún tipo de variable y reutilizar eso, así que en vez de escribir #CCCCCC una y otra vez, puedo escribir:
border: 1px solid $bordercolor;
PD: estoy usando ASP.NET MVC.
Creo que te estarás refiriendo a las variables CSS . Lamentablemente, no están bien respaldados.
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 podrías escribir un pre-procesador similar para .NET Framework ..?
Estaba pensando en la plantilla T4 también. Creo que es Visual Studio, así 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;
}
Extiende el estilo dentro del color definido
LE: vea la muestra de KennyTM
No es que yo sepa, pero podría generar su CSS desde una página .NET.
Entonces llámalo con
Y StyleSheet.aspx se vería como
<%@ Page Language="C#" %>
H1
{
background-color:<%= MyColourVariable %>;
}
EDITAR: Sin embargo, hoy sugiero usar LESS o sass-lang.com
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.
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. Aquí hay un ejemplo:
Realmente no puede definir variables en CSS, pero puede hacer lo que está buscando de varias formas. 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 poner en cascada sus estilos de manera 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 esa manera todavía estás controlando tu color desde 1 lugar.
También podría usar un CSS de "nivel superior". sass-lang.com 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.
Un elemento puede tener múltiples clases asignadas. Así que podrías crear un estilo que defina tu color de borde y usarlo junto con otras clases para otros atributos:
.bordercolor { border-color:#CCCCCC; }
<div class="bordercolor otherstyle">
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. Ejemplos incluyen:
- http://www.devwebprose.com/devwebprose-109-20061016AddvariablestostandardCSSstylesheetsinASPNET.html
- http://www.aspnetresources.com/articles/variables_in_css.aspx
Esto sin duda funcionará. No lo he probado en ninguna de mis aplicaciones, así que no puedo hablar sobre las implicaciones del rendimiento.
.classA, .classB, .classC {
border-color: #CCC;
}
.classA {
border-width: 1px;
border-style: solid;
}
...
Pero no puede usar la sintaxis de mano corta para definir el borde nunca más.