css - sirve - ¿Cómo puedo reutilizar un color en una hoja de estilo?

link rel= stylesheet para que sirve

Question

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.

Answer 1

Además de generarlo desde una página .NET, podrías usar algún tipo de preprocesador. Hay aplicaciones de uso general como m4 o específicas de CSS como LESS .

Answer 2

Creo que te estarás refiriendo a las variables CSS . Lamentablemente, no están bien respaldados.

Answer 3

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 ..?

Answer 4

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;
}

Answer 5

Extiende el estilo dentro del color definido

LE: vea la muestra de KennyTM

Answer 6

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

Answer 7

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.

Answer 8

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:

http://mailmarkup.org/mmlorg.php

Answer 9

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.

Answer 10

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.

Answer 11

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">

Answer 12

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.

Answer 13

.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.