Comment puis-je réutiliser une couleur dans une feuille de style?

Question

J'ai une feuille de style et un grand nombre de styles avec la même couleur de la bordure (#CCCCCC pour être précis).

Est-il un moyen de spécifier une sorte de variable et de les réutiliser, donc au lieu de taper #CCCCCC de plus et plus, je peux taper:

border: 1px solid $bordercolor;

P. S. je suis en utilisant ASP.NET MVC.

Answer 1

.classA, .classB, .classC {
   border-color: #CCC;
}

.classA {
   border-width: 1px;
   border-style: solid;
}

...

Mais vous ne pouvez pas utiliser le court de main syntaxe pour définir la frontière plus.

Answer 2

Un élément peut avoir plusieurs classes affectées. Ainsi, vous pouvez créer un style qui vous définit la couleur de la bordure et de l'utiliser en conjonction avec d'autres classes pour d'autres attributs:

.bordercolor { border-color:#CCCCCC; }

<div class="bordercolor otherstyle">

Answer 3

Pas que je suis au courant, mais vous pouvez générer votre code CSS à partir d'un .NET page.

Puis l'appeler avec

Et La Feuille De Style.aspx ressemblerait à quelque chose comme

<%@ Page Language="C#" %> 
H1 
{ 
  background-color:<%= MyColourVariable %>; 
}

EDIT: Cependant, aujourd'hui, je vous suggérons d'utiliser MOINS ou SASS

Answer 4

Vous pouvez également utiliser un "plus" au niveau de la CSS. Sass et Moins les deux offrent des variables. Ils travaillent par écrit, dans une langue qui est un sur-ensemble de CSS et ensuite vous le compiler pour le CSS quand vous test/déploiement. Il y a des crochets pour le RoR pour les deux, il y a peut être un pour asp.net.

Answer 5

On ne peut pas vraiment définir des variables dans le CSS, mais vous pouvez trier de faire ce que vous êtes après quelques-uns des moyens. Tout d'abord, vous pouvez appliquer plusieurs classes à votre élément et il suffit de garder la couleur dans sa propre classe.

.myBorderColor { border-color: #000000; }
.myOtherClass { font-weight: bold; }

<div class="myBorderColor myOtherClass">content</div>

L'autre alternative est de cascade de styles de sorte que plus de 1 pâté de maisons est appliquée.

div.a { font-weight: bold; }
div.b { color: #cccccc; }

div.a div.b { border-color: #000000; }

De cette façon, vous êtes toujours en contrôle de votre couleur à partir de 1 place.